scan-wave/src/routes/private/events/+page.svelte

<script lang="ts">
	import SingleEvent from './SingleEvent.svelte';
	import { createQuery } from '@tanstack/svelte-query';
	import { getEvents } from './queries';
	import { writable } from 'svelte/store';

	// Get Supabase client from props
	let { data } = $props();

	// Reactive state for search input and debounced search term
	let searchInput = $state('');
	let debouncedSearch = writable('');
	let searchTimeout: ReturnType<typeof setTimeout>;

	// Debounce the search input
	function handleSearchInput() {
		if (searchTimeout) {
			clearTimeout(searchTimeout);
		}
		
		searchTimeout = setTimeout(() => {
			debouncedSearch.set(searchInput);
		}, 300);
	}

	const eventsQuery = $derived(
		createQuery({
			queryKey: ['refetch', $debouncedSearch],
			queryFn: async () => getEvents(data.supabase, $debouncedSearch)
		})
	);

	// Derived values for UI state
	let isLoading = $derived($eventsQuery.isLoading || $eventsQuery.isFetching);
	let displayEvents = $derived($eventsQuery.data || []);
	let hasError = $derived(!!$eventsQuery.error);
	let errorMessage = $derived($eventsQuery.error?.message);

	// Format date helper function
	function formatDate(dateString: string) {
		const date = new Date(dateString);
		return date.toLocaleDateString('en-GB', {
			day: '2-digit',
			month: '2-digit',
			year: 'numeric'
		});
	}

	// Clear search function
	function clearSearch() {
		searchInput = '';
		debouncedSearch.set('');
	}
</script>

<h1 class="mt-2 mb-4 text-center text-2xl font-bold">
	{$debouncedSearch ? `Search Results: "${$debouncedSearch}"` : 'All Events'}
</h1>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto mb-10">
	{#if isLoading}
		<!-- Loading placeholders -->
		{#each Array(4) as _}
			<div class="block border border-gray-300 rounded bg-white p-4 min-h-[72px]">
				<div class="flex flex-col gap-1">
					<div class="h-6 w-3/4 bg-gray-200 rounded animate-pulse"></div>
					<div class="h-4 w-1/2 bg-gray-100 rounded animate-pulse"></div>
				</div>
			</div>
		{/each}
	{:else if hasError}
		<div class="col-span-full text-center py-8">
			<p class="text-red-600">{errorMessage}</p>
		</div>
	{:else if displayEvents.length === 0}
		<div class="col-span-full text-center py-8">
			<p class="text-gray-500">No events found. Create your first event!</p>
		</div>
	{:else}
		{#each displayEvents as event}
			<SingleEvent
				id={event.id}
				name={event.name}
				date={formatDate(event.date)}
				archived={event.archived}
			/>
		{/each}
	{/if}
</div>

<!-- Bottom actions - Mobile optimized -->
<div class="pb-safe fixed right-0 bottom-0 left-0 z-50 border-t border-gray-300 bg-white">
	<!-- Search bar and New Event button layout -->
	<div class="mx-auto flex max-w-2xl flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center">
		<!-- Search bar - Full width on mobile, adaptive on desktop -->
		<div class="relative flex-grow">
			<input
				type="text"
				bind:value={searchInput}
				oninput={handleSearchInput}
				placeholder="Search events..."
				class="w-full rounded-lg border border-gray-300 py-2.5 pr-10 pl-10 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none"
			/>
			<div class="absolute top-1/2 left-3 -translate-y-1/2">
				{#if isLoading}
					<svg
						class="h-4 w-4 animate-spin text-gray-400"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
					>
						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
						></circle>
						<path
							class="opacity-75"
							fill="currentColor"
							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
						></path>
					</svg>
				{:else}
					<svg
						class="h-4 w-4 text-gray-400"
						xmlns="http://www.w3.org/2000/svg"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
						/>
					</svg>
				{/if}
			</div>
			{#if searchInput}
				<button
					onclick={clearSearch}
					class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
					aria-label="Clear search"
				>
					<svg
						class="h-4 w-4"
						xmlns="http://www.w3.org/2000/svg"
						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>
				</button>
			{/if}
		</div>

		<!-- New Event button - Adaptive width -->
		<a
			href="/private/events/event/new"
			class="rounded-lg bg-blue-600 px-6 py-2.5 text-center font-bold whitespace-nowrap text-white transition hover:bg-blue-700 sm:flex-shrink-0"
		>
			<span class="flex items-center justify-center gap-2">
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="h-5 w-5"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M12 4v16m8-8H4"
					/>
				</svg>
				New Event
			</span>
		</a>
	</div>
</div>

<!-- Add padding to bottom of content to prevent overlap with fixed bottom bar -->
<div class="h-24"></div>