chore(#67): Address pr comments

src/lib/components/pokedex/PokedexViewBoxes.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { CatchRecord } from '$lib/models/CatchRecord';
 	import type { CombinedData } from '$lib/models/CombinedData';
-	import type { PokedexEntry } from '$lib/models/PokedexEntry';
+	import { calculateBoxPlacement } from '$lib/utils/boxPlacement';
 	import PokemonSprite from '$lib/components/PokemonSprite.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 
 	export let showShiny = false;
-	export let showForms = true;
 	export let combinedData: CombinedData[] | null;
 	export let boxNumbers: number[] = [];
 	export let creatingRecords = false;
@@ -30,11 +29,11 @@
 		}
 	}
 
-	function cellBackgroundColourStyle(pokedexEntry: PokedexEntry, catchRecord: CatchRecord | null) {
+	function cellBackgroundColourStyle(index: number, catchRecord: CatchRecord | null) {
 		if (catchRecord?.caught || catchRecord?.haveToEvolve) {
 			return '';
 		} else {
-			const placement = showForms ? pokedexEntry.boxPlacementForms : pokedexEntry.boxPlacement;
+			const placement = calculateBoxPlacement(index);
 			if (placement.column % 2 === 0) {
 				return 'background-color: #ffffff';
 			} else {
@@ -68,16 +67,16 @@
 								>Mark box as not 'in Home'</button
 							>
 							<div class="grid grid-cols-6">
-								{#each combinedData as { pokedexEntry, catchRecord }}
-									{@const placement = showForms
-										? pokedexEntry.boxPlacementForms
-										: pokedexEntry.boxPlacement}
+								{#each combinedData as { pokedexEntry, catchRecord }, index}
+									{@const placement = calculateBoxPlacement(index)}
 									{#if placement.box === boxNumber}
 										<button
 											type="button"
-											class="pokemon-box {cellBackgroundColourClass(catchRecord)} hover:scale-105 hover:shadow-lg hover:z-50 transition-all cursor-pointer relative"
+											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)}"
+																{cellBackgroundColourStyle(index, catchRecord)}"
 											on:click={() => onPokemonClick({ pokedexEntry, catchRecord })}
 											aria-label="View details for {pokedexEntry.pokemon}"
 										>

src/lib/models/PokedexEntry.ts

@@ -2,8 +2,6 @@
 export interface PokedexEntry {
 	_id: string; // Maps to Supabase 'id' field for frontend compatibility
 	pokedexNumber: number;
-	boxPlacement: { box: number; row: number; column: number };
-	boxPlacementForms: { box: number; row: number; column: number };
 	pokemon: string;
 	form: string;
 	canGigantamax: boolean;

src/lib/repositories/CombinedDataRepository.ts

@@ -22,10 +22,7 @@ class CombinedDataRepository {
 			gamesToCatchIn: entry.gamesToCatchIn || [],
 			regionToEvolveIn: entry.regionToEvolveIn || '',
 			evolutionInformation: entry.evolutionInformation || '',
-			catchInformation: entry.catchInformation || [],
-			// Box placement will be calculated dynamically after sorting
-			boxPlacementForms: { box: 0, row: 0, column: 0 },
-			boxPlacement: { box: 0, row: 0, column: 0 }
+			catchInformation: entry.catchInformation || []
 			// Note: Regional dex numbers are stored in separate regional_dex_numbers table
 		};
 	}
@@ -113,8 +110,8 @@ class CombinedDataRepository {
 			};
 		});
 
-		// Always recalculate box placement based on current sort order
-		return this.recalculateBoxPlacement(combinedData, enableForms);
+		// Box placement is calculated dynamically on the frontend based on the current sort order.
+		return combinedData;
 	}
 
 	async findCombinedData(
@@ -191,15 +188,11 @@ class CombinedDataRepository {
 			};
 		});
 
-		// Always recalculate box placement based on current sort order
-		return this.recalculateBoxPlacement(combinedData, enableForms);
+		// Box placement is calculated dynamically on the frontend based on the current sort order.
+		return combinedData;
 	}
 
-	async countCombinedData(
-		enableForms: boolean,
-		region: string,
-		game: string
-	): Promise<number> {
+	async countCombinedData(enableForms: boolean, region: string, game: string): Promise<number> {
 		let query = this.supabase.from('pokedex_entries').select('id', { count: 'exact', head: true });
 
 		// Apply same filters as in findCombinedData
@@ -225,35 +218,6 @@ class CombinedDataRepository {
 
 		return count || 0;
 	}
-
-	/**
-	 * Recalculates box placement based on the current order of data.
-	 * Used when ordering by regional dex instead of pre-calculated national dex placement.
-	 */
-	private recalculateBoxPlacement(
-		data: CombinedData[],
-		useFormsPlacement: boolean
-	): CombinedData[] {
-		return data.map((item, index) => {
-			const placementIndex = index + 1; // 1-based indexing
-			const box = Math.ceil(placementIndex / 30);
-			const rowColumnIndex = (placementIndex - 1) % 30;
-			const row = Math.floor(rowColumnIndex / 6) + 1;
-			const column = (rowColumnIndex % 6) + 1;
-
-			const newPlacement = { box, row, column };
-
-			return {
-				...item,
-				pokedexEntry: {
-					...item.pokedexEntry,
-					...(useFormsPlacement
-						? { boxPlacementForms: newPlacement }
-						: { boxPlacement: newPlacement })
-				}
-			};
-		});
-	}
 }
 
 export default CombinedDataRepository;

src/lib/repositories/PokedexEntryRepository.ts

@@ -16,26 +16,7 @@ class PokedexEntryRepository {
 			gamesToCatchIn: entry.gamesToCatchIn || [],
 			regionToEvolveIn: entry.regionToEvolveIn || '',
 			evolutionInformation: entry.evolutionInformation || '',
-			catchInformation: entry.catchInformation || [],
-			// Box placement is calculated dynamically - not stored in database
-			boxPlacementForms: { box: 0, row: 0, column: 0 },
-			boxPlacement: { box: 0, row: 0, column: 0 },
-			kantoDexNumber: entry.kanto_dex_number ?? undefined,
-			johtoDexNumber: entry.johto_dex_number ?? undefined,
-			hoennDexNumber: entry.hoenn_dex_number ?? undefined,
-			sinnohDexNumber: entry.sinnoh_dex_number ?? undefined,
-			unovaBwDexNumber: entry.unova_bw_dex_number ?? undefined,
-			unovaB2w2DexNumber: entry.unova_b2w2_dex_number ?? undefined,
-			kalosCentralDexNumber: entry.kalos_central_dex_number ?? undefined,
-			kalosCoastalDexNumber: entry.kalos_coastal_dex_number ?? undefined,
-			kalosMountainDexNumber: entry.kalos_mountain_dex_number ?? undefined,
-			alolaSmDexNumber: entry.alola_sm_dex_number ?? undefined,
-			alolaUsumDexNumber: entry.alola_usum_dex_number ?? undefined,
-			galarDexNumber: entry.galar_dex_number ?? undefined,
-			galarIsleOfArmorDexNumber: entry.galar_isle_of_armor_dex_number ?? undefined,
-			galarCrownTundraDexNumber: entry.galar_crown_tundra_dex_number ?? undefined,
-			hisuiDexNumber: entry.hisui_dex_number ?? undefined,
-			paldeaDexNumber: entry.paldea_dex_number ?? undefined
+			catchInformation: entry.catchInformation || []
 		};
 	}