feat(*): Add improvements to the UX and the data seeding

src/lib/components/PokemonSprite.svelte

@@ -31,13 +31,20 @@
 		// Sanitise the pokemon name by making it all lowercase and replacing any spaces with hyphens and removing other characters
 		let sanitisedPokemonName = pokemonName.toLowerCase().replace(/[^a-z]/g, '');
 
-		// Get the PokeApi id for the pokemon
+		/**
+		 * Sprite Resolution Strategy:
+		 * 1. For forms with PokeAPI entries (regional forms): Use PokeAPI ID (e.g., 10107.png)
+		 * 2. For forms without PokeAPI entries (Unown, Burmy, etc.): Use {pokedexNumber}-{form} (e.g., 201-a.png)
+		 * 3. For base forms: Use PokeAPI ID matching species_id
+		 */
 		let pokeApiId;
 		if (form && form.length > 0 && form !== 'Female') {
 			// Sanitise the form by making it all lowercase and replacing spaces with hyphens
 			let sanitisedForm = form
 				.toLowerCase()
 				.replaceAll(' ', '-')
+				.replaceAll('!', 'exclamation')
+				.replaceAll('?', 'question')
 				.replaceAll('2', 'two')
 				.replaceAll('3', 'three')
 				.replaceAll('4', 'four');
@@ -59,20 +66,17 @@
 					break;
 			}
 
-			// If the form is contained in the identifier, use that
-			if (
-				pokeApiPokemon.find(
-					(pokemon) => pokemon.identifier === sanitisedPokemonName + '-' + sanitisedForm
-				)
-			) {
-				pokeApiId = pokeApiPokemon.find(
-					(pokemon) => pokemon.identifier === sanitisedPokemonName + '-' + sanitisedForm
-				)?.id;
+			// Try to find by PokeAPI identifier (e.g., "meowth-alola" -> 10107)
+			const pokeApiEntry = pokeApiPokemon.find(
+				(pokemon) => pokemon.identifier === sanitisedPokemonName + '-' + sanitisedForm
+			);
+
+			if (pokeApiEntry) {
+				// Pattern 1: Use PokeAPI ID (e.g., 10107.png for Meowth-Alola)
+				pokeApiId = pokeApiEntry.id;
 			} else {
-				// If the form is not contained in the identifier, use the species_id
-				pokeApiId = pokeApiPokemon.find(
-					(pokemon) => pokemon.species_id.toString() === strippedPokedexNumber
-				)?.id;
+				// Pattern 2: Use {pokedexNumber}-{form} (e.g., 201-a.png for Unown-A)
+				pokeApiId = `${strippedPokedexNumber}-${sanitisedForm}`;
 			}
 		} else {
 			pokeApiId = pokeApiPokemon.find(

src/lib/components/pokedex/PokedexEntryCatchRecord.svelte

@@ -139,6 +139,7 @@
 					bind:value={catchRecord.personalNotes}
 					id={`personalNotesInput-${catchRecord._id || pokedexEntry._id}`}
 					class="form-textarea w-full p-2 border rounded"
+					style="min-height: 120px;"
 					on:change={updateCatchRecord}
 				></textarea>
 			</p>
@@ -199,7 +200,8 @@
 
 <style>
 	.dex-column {
-		width: 300px;
+		flex: 1;
+		min-width: 250px;
 	}
 
 	.sprite-container {

src/lib/components/pokedex/PokedexForm.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import type { Pokedex } from '$lib/models/Pokedex';
 
 	export let pokedex: Partial<Pokedex> = {
@@ -14,6 +15,26 @@
 	export let onSubmit: () => void;
 	export let onCancel: () => void;
 
+	let games: string[] = [];
+	let loadingGames = true;
+
+	// Fetch available games from the database
+	onMount(async () => {
+		try {
+			const response = await fetch('/api/games');
+			if (response.ok) {
+				const data = await response.json();
+				games = data.games || [];
+			} else {
+				console.error('Failed to fetch games');
+			}
+		} catch (error) {
+			console.error('Error fetching games:', error);
+		} finally {
+			loadingGames = false;
+		}
+	});
+
 	// Validation
 	$: hasAtLeastOneType =
 		pokedex.isLivingDex || pokedex.isShinyDex || pokedex.isOriginDex || pokedex.isFormDex;
@@ -83,15 +104,20 @@
 	<label class="label" for="game-scope">
 		<span class="label-text">Game Scope</span>
 	</label>
-	<select id="game-scope" class="select select-bordered" bind:value={pokedex.gameScope}>
+	<select
+		id="game-scope"
+		class="select select-bordered"
+		bind:value={pokedex.gameScope}
+		disabled={loadingGames}
+	>
 		<option value={null}>All Games</option>
-		<option value="Scarlet">Scarlet</option>
-		<option value="Violet">Violet>
-		<option value="Sword">Sword</option>
-		<option value="Shield">Shield</option>
-		<option value="Brilliant Diamond">Brilliant Diamond</option>
-		<option value="Shining Pearl">Shining Pearl</option>
-		<option value="Legends: Arceus">Legends: Arceus</option>
+		{#if loadingGames}
+			<option disabled>Loading games...</option>
+		{:else}
+			{#each games as game}
+				<option value={game}>{game}</option>
+			{/each}
+		{/if}
 	</select>
 </div>
 

src/lib/components/pokedex/PokedexModal.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	export let isOpen: boolean;
+	export let onClose: () => void;
+
+	function handleBackdropClick() {
+		onClose();
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && isOpen) {
+			onClose();
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener('keydown', handleKeyDown);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('keydown', handleKeyDown);
+	});
+</script>
+
+{#if isOpen}
+	<div class="modal modal-open" role="dialog" aria-modal="true">
+		<div class="modal-box-custom">
+			<button class="close-button" on:click={onClose} aria-label="Close"> ✕ </button>
+			<div class="modal-content">
+				<slot />
+			</div>
+		</div>
+		<div
+			class="modal-backdrop bg-black/50"
+			on:click={handleBackdropClick}
+			on:keydown={() => {}}
+		></div>
+	</div>
+{/if}
+
+<style>
+	.modal-backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.modal-box-custom {
+		max-width: 72rem;
+		width: 100%;
+		max-height: 90vh;
+		background-color: rgba(220, 38, 38, 0.95);
+		border: none;
+		box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+		outline: none;
+		position: relative;
+		border-radius: 1rem;
+		padding: 0.5rem;
+		overflow-y: auto;
+		box-sizing: border-box;
+	}
+
+	.close-button {
+		position: absolute;
+		right: 1rem;
+		top: 1rem;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 50%;
+		background-color: rgba(0, 0, 0, 0.3);
+		color: white;
+		border: 2px solid rgba(255, 255, 255, 0.3);
+		font-size: 1.5rem;
+		font-weight: bold;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s;
+		z-index: 10;
+		line-height: 1;
+	}
+
+	.close-button:hover {
+		background-color: rgba(0, 0, 0, 0.5);
+		border-color: rgba(255, 255, 255, 0.5);
+		transform: scale(1.1);
+	}
+
+	.modal-content {
+		width: 100%;
+	}
+
+	/* Remove margin and background from card inside modal */
+	.modal-content :global(.dex-entry) {
+		margin-bottom: 0;
+		background-color: transparent !important;
+		box-shadow: none;
+	}
+
+	@media (min-width: 768px) {
+		.modal-box-custom {
+			width: 91.666667%;
+		}
+	}
+</style>

src/lib/components/pokedex/PokedexSidebar.svelte

@@ -1,149 +0,0 @@
-<script lang="ts">
-	import Pagination from '$lib/components/Pagination.svelte';
-	import type { Pokedex } from '$lib/models/Pokedex';
-
-	export let pokedex: Pokedex | null = null;
-	export let viewAsBoxes = false;
-	export let currentPage = 1;
-	export let itemsPerPage = 20;
-	export let totalPages = 0;
-	export let showOrigins = true;
-	export let showShiny = false;
-	export let catchRegion = '';
-	export let catchGame = '';
-	export let toggleOrigins = () => {};
-	export let toggleShiny = () => {};
-	export let getData = () => {};
-	export let toggleViewAsBoxes = () => {};
-
-	// Get active type badges
-	$: typeBadges = pokedex
-		? [
-				pokedex.isLivingDex && 'Living',
-				pokedex.isShinyDex && 'Shiny',
-				pokedex.isOriginDex && 'Origin',
-				pokedex.isFormDex && 'Form'
-			].filter(Boolean)
-		: [];
-</script>
-
-<aside
-	class="menu bg-gray-800 text-white min-h-full w-64 p-4 lg:fixed xs:top-0 lg:left-0 h-full lg:h-5/6"
->
-	<!-- Pokédex Info Section -->
-	{#if pokedex}
-		<div class="mb-6 pb-4 border-b border-gray-700">
-			<h2 class="text-xl font-semibold mb-2">{pokedex.name}</h2>
-			<div class="flex flex-wrap gap-1 mb-2">
-				{#each typeBadges as badge}
-					<span class="badge badge-sm badge-primary">{badge}</span>
-				{/each}
-			</div>
-			{#if pokedex.gameScope}
-				<p class="text-sm text-gray-400">Game: {pokedex.gameScope}</p>
-			{/if}
-			<a href="/my-pokedexes" class="btn btn-ghost btn-sm mt-2 w-full"> Manage Pokédexes </a>
-		</div>
-	{/if}
-	<h2 class="text-2xl font-semibold mb-4">Views</h2>
-	<ul>
-		<li class="mb-2">
-			<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleViewAsBoxes}>
-				{viewAsBoxes ? 'Switch to List View' : 'Switch to Box View'}
-			</button>
-		</li>
-	</ul>
-	<h2 class="text-2xl font-semibold mb-4">Filters</h2>
-	<ul>
-		<li class="mb-2">
-			<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleOrigins}>
-				Toggle Origins (Currently {showOrigins ? 'On' : 'Off'})
-			</button>
-		</li>
-		<li class="mb-2">
-			<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleShiny}>
-				Toggle Shiny (Currently {showShiny ? 'On' : 'Off'})
-			</button>
-		</li>
-	</ul>
-	<div class="mb-4">
-		<label for="catchRegionSelect">Region to catch in:</label>
-		<select
-			id="catchRegionSelect"
-			class="select select-bordered w-full max-w-xs text-black"
-			bind:value={catchRegion}
-			on:change={getData}
-		>
-			<option value="">All</option>
-			<option value="Kanto">Kanto (Red, Blue, Yellow, LG: Pikachu, LG: Eevee)</option>
-			<option value="Johto">Johto (Gold, Silver, Crystal, HG, SS)</option>
-			<option value="Hoenn">Hoenn (Ruby, Sapphire, Emerald, OR, AS)</option>
-			<option value="Sinnoh">Sinnoh (Diamond, Pearl, Platinum, BD, SP)</option>
-			<option value="Unova">Unova (Black, White, Black2, White2, Dream Radar)</option>
-			<option value="Kalos">Kalos (X, Y)</option>
-			<option value="Alola">Alola (Sun, Moon, Moon Demo, US, UM)</option>
-			<option value="Galar">Galar (Sword, Shield)</option>
-			<option value="Hisui">Hisui (PLA)</option>
-			<option value="Paldea">Paldea (Scarlet, Violet)</option>
-			<option value="Unknown">Unknown (Home, Go)</option>
-		</select>
-	</div>
-
-	<div class="mb-4">
-		<label for="catchGameSelect">Game to catch in: {catchGame}</label>
-		<select
-			id="catchGameSelect"
-			class="select select-bordered w-full max-w-xs text-black"
-			bind:value={catchGame}
-			on:change={getData}
-		>
-			<option value="">All</option>
-			<option value="Red">Red (Kanto)</option>
-			<option value="Blue">Blue (Kanto)</option>
-			<option value="Yellow">Yellow (Kanto)</option>
-			<option value="LG: Pikachu">LG: Pikachu (Kanto)</option>
-			<option value="LG: Eevee">LG: Eevee (Kanto)</option>
-			<option value="Gold">Gold (Johto)</option>
-			<option value="Silver">Silver (Johto)</option>
-			<option value="Crystal">Crystal (Johto)</option>
-			<option value="HG">HG (Johto)</option>
-			<option value="SS">SS (Johto)</option>
-			<option value="Ruby">Ruby (Hoenn)</option>
-			<option value="Sapphire">Sapphire (Hoenn)</option>
-			<option value="Emerald">Emerald (Hoenn)</option>
-			<option value="OR">OR (Hoenn)</option>
-			<option value="AS">AS (Hoenn)</option>
-			<option value="Diamond">Diamond (Sinnoh)</option>
-			<option value="Pearl">Pearl (Sinnoh)</option>
-			<option value="Platinum">Platinum (Sinnoh)</option>
-			<option value="BD">BD (Sinnoh)</option>
-			<option value="SP">SP (Sinnoh)</option>
-			<option value="Black">Black (Unova)</option>
-			<option value="White">White (Unova)</option>
-			<option value="Black2">Black2 (Unova)</option>
-			<option value="White2">White2 (Unova)</option>
-			<option value="Dream Radar">Dream Radar (Unova)</option>
-			<option value="X">X (Kalos)</option>
-			<option value="Y">Y (Kalos)</option>
-			<option value="Sun">Sun (Alola)</option>
-			<option value="Moon">Moon (Alola)</option>
-			<option value="Moon Demo">Moon Demo (Alola)</option>
-			<option value="US">US (Alola)</option>
-			<option value="UM">UM (Alola)</option>
-			<option value="Sword">Sword (Galar)</option>
-			<option value="Shield">Shield (Galar)</option>
-			<option value="PLA">PLA (Hisui)</option>
-			<option value="Scarlet">Scarlet (Paldea)</option>
-			<option value="Violet">Violet (Paldea)</option>
-			<option value="Home">Home (Unknown)</option>
-			<option value="Go">Go (Unknown)</option>
-		</select>
-	</div>
-
-	{#if !viewAsBoxes}
-		<h2 class="text-2xl font-semibold mb-4">Paging</h2>
-		<div>
-			<Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
-		</div>
-	{/if}
-</aside>

src/lib/components/pokedex/PokedexViewBoxes.svelte

@@ -18,6 +18,7 @@
 	export let markBoxAsInHome = (boxNumber: number) => {};
 	export let markBoxAsNotInHome = (boxNumber: number) => {};
 	export let createCatchRecords = () => {};
+	export let onPokemonClick: (pokemon: CombinedData) => void = () => {};
 
 	function cellBackgroundColourClass(catchRecord: CatchRecord | null) {
 		if (catchRecord?.caught) {
@@ -51,19 +52,19 @@
 					{#each boxNumbers as boxNumber}
 						<div class="mb-8 md:w-1/2 px-2">
 							<h2 class="text-xl font-bold mb-4">Box {boxNumber}</h2>
-							<button class="btn" on:click={markBoxAsNotCaught(boxNumber)}>
+							<button class="btn" on:click={() => markBoxAsNotCaught(boxNumber)}>
 								Mark box as not 'caught'
 							</button>
-							<button class="btn" on:click={markBoxAsCaught(boxNumber)}>
+							<button class="btn" on:click={() => markBoxAsCaught(boxNumber)}>
 								Mark box as 'caught'
 							</button>
-							<button class="btn" on:click={markBoxAsNeedsToEvolve(boxNumber)}
+							<button class="btn" on:click={() => markBoxAsNeedsToEvolve(boxNumber)}
 								>Mark box as 'needs to evolve'</button
 							>
-							<button class="btn" on:click={markBoxAsInHome(boxNumber)}
+							<button class="btn" on:click={() => markBoxAsInHome(boxNumber)}
 								>Mark box as 'in Home'</button
 							>
-							<button class="btn" on:click={markBoxAsNotInHome(boxNumber)}
+							<button class="btn" on:click={() => markBoxAsNotInHome(boxNumber)}
 								>Mark box as not 'in Home'</button
 							>
 							<div class="grid grid-cols-6">
@@ -72,10 +73,13 @@
 										? pokedexEntry.boxPlacementForms
 										: pokedexEntry.boxPlacement}
 									{#if placement.box === boxNumber}
-										<div
-											class="pokemon-box {cellBackgroundColourClass(catchRecord)}"
+										<button
+											type="button"
+											class="pokemon-box {cellBackgroundColourClass(catchRecord)} hover:scale-105 hover:shadow-lg hover:z-50 transition-all cursor-pointer relative"
 											style="grid-column-start: {placement.column}; grid-row-start: {placement.row};
                                         {cellBackgroundColourStyle(pokedexEntry, catchRecord)}"
+											on:click={() => onPokemonClick({ pokedexEntry, catchRecord })}
+											aria-label="View details for {pokedexEntry.pokemon}"
 										>
 											<Tooltip>
 												<div slot="hover-target">
@@ -106,7 +110,7 @@
 													</div>
 												</div>
 											</Tooltip>
-										</div>
+										</button>
 									{/if}
 								{/each}
 							</div>

src/lib/components/pokedex/PokedexViewList.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	import PokedexEntryCatchRecord from './PokedexEntryCatchRecord.svelte';
-	import type { CombinedData } from '$lib/models/CombinedData';
-
-	export let showOrigins = true;
-	export let showForms = true;
-	export let showShiny = false;
-	export let combinedData: CombinedData[] | null;
-	export let creatingRecords = false;
-	export let totalRecordsCreated = 0;
-	export let failedToLoad = false;
-	export let updateACatch = (event: any) => {};
-	export let createCatchRecords = () => {};
-	export let userId: string | null = null;
-	export let pokedexId: string;
-</script>
-
-<main class="flex-1 p-4 w-full">
-	<div class="max-w-min mx-auto">
-		{#if combinedData && combinedData.length > 0}
-			{#each combinedData as { pokedexEntry, catchRecord }}
-				<PokedexEntryCatchRecord
-					{pokedexEntry}
-					{showOrigins}
-					{showForms}
-					{showShiny}
-					{userId}
-					{pokedexId}
-					bind:catchRecord
-					on:updateCatch={updateACatch}
-				/>
-			{/each}
-		{:else if failedToLoad}
-			{#if creatingRecords && totalRecordsCreated > 0}
-				<p>Processed {totalRecordsCreated} Pokédex entries so far...</p>
-				<p>Please be patient, this may take some time.</p>
-			{:else if creatingRecords}
-				<p>Processing...</p>
-				<p>Please be patient, this may take some time.</p>
-			{:else}
-				<h1>Failed to load</h1>
-				<p>
-					If you're seeing this, you probably haven't created your Pokédex data yet. Please do so by
-					clicking this button.
-				</p>
-				<button class="btn" on:click={createCatchRecords}>Create Pokédex data</button>
-			{/if}
-		{:else}
-			<div class="min-w-max mx-auto">
-				<h1>Loading Pokédex</h1>
-				<span class="loading loading-spinner loading-xl"></span>
-			</div>
-		{/if}
-	</div>
-</main>