feat(*): Add ability to toggle origins and forms

src/lib/components/pokedex/PokedexEntryCatchRecord.svelte

@@ -6,6 +6,8 @@
 
 	export let pokedexEntry: PokedexEntry;
 	export let catchRecord: CatchRecord;
+	export let showOrigins: boolean;
+	export let showForms: boolean;
 
 	const dispatch = createEventDispatcher();
 
@@ -34,15 +36,19 @@
 			</div>
 		</div>
 
+		{#if showForms}
 			<div class="bg-white text-black rounded-lg p-4 mb-2">
 				<p><strong>Form:</strong> {pokedexEntry.form ? pokedexEntry.form : '-'}</p>
 			</div>
+		{/if}
 
 		<div class="bg-white text-black rounded-lg p-4">
 			<p><strong>Box:</strong> {pokedexEntry.boxPlacement.box}</p>
 			<p><strong>Row:</strong> {pokedexEntry.boxPlacement.row}</p>
 			<p><strong>Column:</strong> {pokedexEntry.boxPlacement.column}</p>
+			{#if showForms}
 				<p><strong>Can Gigantamax:</strong> {pokedexEntry.canGigantamax ? 'Yes' : 'No'}</p>
+			{/if}
 			<p><strong>Notes:</strong> {pokedexEntry.notes}</p>
 		</div>
 	</div>
@@ -77,7 +83,7 @@
 				class="form-checkbox"
 			/>
 		</div>
-		{#if pokedexEntry.canGigantamax}
+		{#if pokedexEntry.canGigantamax && showForms}
 			<div class="flex items-center">
 				<label class="block font-bold mr-2" for={`hasGigantamaxedInput-${catchRecord._id}`}
 					>Has Gigantamaxed:</label
@@ -103,6 +109,7 @@
 	</div>
 
 	<div class="dex-column additional-details-container">
+		{#if showOrigins}
 			<div class="bg-white text-black rounded-lg p-4 mb-2">
 				<p><strong>Region to Catch In:</strong> {pokedexEntry.regionToCatchIn}</p>
 				<p><strong>Games to catch in:</strong></p>
@@ -115,6 +122,7 @@
 					<p><strong>Region to Evolve In:</strong> {pokedexEntry.regionToEvolveIn}</p>
 				{/if}
 			</div>
+		{/if}
 		<div class="bg-white text-black rounded-lg p-4">
 			<button on:click={save}>Save</button>
 		</div>

src/routes/mydex/+page.svelte

@@ -21,6 +21,17 @@
 	let creatingRecords = false;
 	let totalRecordsCreated = 0;
 
+	let showOrigins = true;
+	let showForms = true;
+
+	function toggleOrigins() {
+		showOrigins = !showOrigins;
+	}
+
+	function toggleForms() {
+		showForms = !showForms;
+	}
+
 	async function fetchPokeDexEntries() {
 		console.log('Fetching updated Pokedex entry data');
 		const response = await fetch('/api/pokedexentries');
@@ -164,8 +175,8 @@
 <div class="container mx-auto">
 	{#if combinedData}
 		<div>
-			<button>Toggle Forms</button>
+			<button on:click={() => toggleForms()}>Toggle Forms</button>
-			<button>Toggle Origins</button>
+			<button on:click={() => toggleOrigins()}>Toggle Origins</button>
 		</div>
 
 		<!-- <p>
@@ -175,6 +186,8 @@
 			<div>
 				<PokedexEntryCatchRecord
 					{pokedexEntry}
+					{showOrigins}
+					{showForms}
 					bind:catchRecord
 					on:updateCatch={() => updateACatch(catchRecord)}
 				/>