feat(*): Migrate from MongoDB to unified Supabase PostgreSQL architecture

src/lib/components/pokedex/PokedexEntryCatchRecord.svelte

@@ -5,15 +5,27 @@
 	import { createEventDispatcher } from 'svelte';
 
 	export let pokedexEntry: PokedexEntry;
-	export let catchRecord: CatchRecord;
+	export let catchRecord: CatchRecord | null;
 	export let showOrigins: boolean;
 	export let showForms: boolean;
 	export let showShiny: boolean;
 
+	// Create a working copy for editing
+	$: workingCatchRecord = catchRecord || {
+		_id: '',
+		userId: '',
+		pokedexEntryId: pokedexEntry._id,
+		haveToEvolve: false,
+		caught: false,
+		inHome: false,
+		hasGigantamaxed: false,
+		personalNotes: ''
+	};
+
 	const dispatch = createEventDispatcher();
 
 	function updateCatchRecord() {
-		dispatch('updateCatch', { pokedexEntry, catchRecord });
+		dispatch('updateCatch', { pokedexEntry, catchRecord: workingCatchRecord });
 	}
 </script>
 
@@ -75,7 +87,7 @@
 					<span class="block font-bold mr-2">Caught:</span>
 					<input
 						type="checkbox"
-						bind:checked={catchRecord.caught}
+						bind:checked={workingCatchRecord.caught}
 						class="checkbox checkbox-primary border-black"
 						on:change={updateCatchRecord}
 					/>
@@ -88,7 +100,7 @@
 					<span class="block font-bold mr-2">Needs to evolve:</span>
 					<input
 						type="checkbox"
-						bind:checked={catchRecord.haveToEvolve}
+						bind:checked={workingCatchRecord.haveToEvolve}
 						class="checkbox checkbox-primary border-black"
 						on:change={updateCatchRecord}
 					/>
@@ -101,7 +113,7 @@
 					<span class="block font-bold mr-2">In home:</span>
 					<input
 						type="checkbox"
-						bind:checked={catchRecord.inHome}
+						bind:checked={workingCatchRecord.inHome}
 						class="checkbox checkbox-primary border-black"
 						on:change={updateCatchRecord}
 					/>
@@ -115,7 +127,7 @@
 						<span class="block font-bold mr-2">Has Gigantamaxed:</span>
 						<input
 							type="checkbox"
-							bind:checked={catchRecord.hasGigantamaxed}
+							bind:checked={workingCatchRecord.hasGigantamaxed}
 							class="checkbox checkbox-primary border-black"
 							on:change={updateCatchRecord}
 						/>
@@ -124,12 +136,12 @@
 			</div>
 		{/if}
 		<p>
-			<label class="block font-bold mb-1" for={`personalNotesInput-${catchRecord._id}`}
+			<label class="block font-bold mb-1" for={`personalNotesInput-${catchRecord?._id || pokedexEntry._id}`}
 				>Notes:</label
 			>
 			<textarea
-				bind:value={catchRecord.personalNotes}
-				id={`personalNotesInput-${catchRecord._id}`}
+				bind:value={workingCatchRecord.personalNotes}
+				id={`personalNotesInput-${catchRecord?._id || pokedexEntry._id}`}
 				class="form-textarea w-full p-2 border rounded"
 				on:change={updateCatchRecord}
 			></textarea>

src/lib/components/pokedex/PokedexViewBoxes.svelte

@@ -19,18 +19,18 @@
 	export let markBoxAsNotInHome = (boxNumber: number) => {};
 	export let createCatchRecords = () => {};
 
-	function cellBackgroundColourClass(catchRecord: CatchRecord) {
-		if (catchRecord.caught) {
+	function cellBackgroundColourClass(catchRecord: CatchRecord | null) {
+		if (catchRecord?.caught) {
 			return 'bg-green-100/50';
-		} else if (catchRecord.haveToEvolve) {
+		} else if (catchRecord?.haveToEvolve) {
 			return 'bg-yellow-100/50';
 		} else {
 			return '';
 		}
 	}
 
-	function cellBackgroundColourStyle(pokedexEntry: PokedexEntry, catchRecord: CatchRecord) {
-		if (catchRecord.caught || catchRecord.haveToEvolve) {
+	function cellBackgroundColourStyle(pokedexEntry: PokedexEntry, catchRecord: CatchRecord | null) {
+		if (catchRecord?.caught || catchRecord?.haveToEvolve) {
 			return '';
 		} else {
 			if (pokedexEntry[currentPlacement].column % 2 === 0) {
@@ -76,7 +76,7 @@
 										>
 											<Tooltip>
 												<div slot="hover-target">
-													{#if catchRecord.inHome}
+													{#if catchRecord?.inHome}
 														<span
 															class="absolute -top-5 -right-4 z-2 p-1 text-secondary text-lg font-extrabold"
 															>&#10003;</span
@@ -97,9 +97,9 @@
 													</div>
 													<div>{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</div>
 													<div>
-														Caught: {catchRecord.caught ? 'Yes' : 'No'} <br />
-														Needs to Evolve: {catchRecord.haveToEvolve ? 'Yes' : 'No'} <br />
-														In Home: {catchRecord.inHome ? 'Yes' : 'No'}
+														Caught: {catchRecord?.caught ? 'Yes' : 'No'} <br />
+														Needs to Evolve: {catchRecord?.haveToEvolve ? 'Yes' : 'No'} <br />
+														In Home: {catchRecord?.inHome ? 'Yes' : 'No'}
 													</div>
 												</div>
 											</Tooltip>