feat(*): Make mydex use combined data

src/lib/components/Pagination.svelte

@@ -16,14 +16,19 @@
 	}
 </script>
 
-<div>
-	<button on:click={previousPage} disabled={currentPage === 1}>Previous</button>
-	<button on:click={nextPage} disabled={currentPage === totalPages}>Next</button>
-
-	<label for="itemsPerPage">Items per page:</label>
-	<select id="itemsPerPage" on:change={setItemsPerPage}>
-		<option value="20">20</option>
-		<option value="50">50</option>
-		<option value="100">100</option>
-	</select>
+<div class="join mb-4">
+	<button class="join-item btn" on:click={previousPage} disabled={currentPage === 1}>«</button>
+	<button class="join-item btn">Page {currentPage} of {totalPages}</button>
+	<button class="join-item btn" on:click={nextPage} disabled={currentPage === totalPages}>»</button>
 </div>
+
+<label for="itemsPerPage">Items per page:</label>
+<select
+	id="itemsPerPage"
+	class="select select-bordered w-full max-w-xs text-black"
+	on:change={setItemsPerPage}
+>
+	<option value="20">20</option>
+	<option value="50">50</option>
+	<option value="100">100</option>
+</select>

src/lib/components/pokedex/PokedexEntryCatchRecord.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <div
-	class="container bg-red-500 text-white rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-4"
+	class="dex-entry bg-primary/90 text-primary-content rounded-lg shadow-md p-6 flex flex-col md:flex-row gap-4 mb-4"
 >
 	<div class="dex-column pokedex-entry-container">
 		<div class="flex mb-2">
@@ -31,7 +31,7 @@
 				/> -->
 			</div>
 			<div class="pl-2">
-				<h3 class="text-xl font-bold pt-1">{pokedexEntry.pokemon}</h3>
+				<h3 class="text-xl font-bold pt-1 text-secondary">{pokedexEntry.pokemon}</h3>
 				<sub class="text-gray-200">#{pokedexEntry.pokedexNumber.toString().padStart(3, '0')}</sub>
 			</div>
 		</div>
@@ -57,45 +57,53 @@
 
 	<div class="dex-column catch-record-container bg-white text-black rounded-lg p-4 mb-4 md:mb-0">
 		<div class="flex items-center">
-			<label class="block font-bold mr-2" for={`caughtInput-${catchRecord._id}`}>Caught:</label>
-			<input
-				type="checkbox"
-				id={`caughtInput-${catchRecord._id}`}
-				bind:checked={catchRecord.caught}
-				class="form-checkbox"
-			/>
+			<div class="form-control">
+				<label class="cursor-pointer label">
+					<span class="block font-bold mr-2">Caught:</span>
+					<input
+						type="checkbox"
+						bind:checked={catchRecord.caught}
+						class="checkbox checkbox-primary border-black"
+					/>
+				</label>
+			</div>
 		</div>
 		<div class="flex items-center">
-			<label class="block font-bold mr-2" for={`haveToEvolveInput-${catchRecord._id}`}
-				>Needs to evolve:</label
-			>
-			<input
-				type="checkbox"
-				id={`haveToEvolveInput-${catchRecord._id}`}
-				bind:checked={catchRecord.haveToEvolve}
-				class="form-checkbox"
-			/>
+			<div class="form-control">
+				<label class="cursor-pointer label">
+					<span class="block font-bold mr-2">Needs to evolve:</span>
+					<input
+						type="checkbox"
+						bind:checked={catchRecord.haveToEvolve}
+						class="checkbox checkbox-primary border-black"
+					/>
+				</label>
+			</div>
 		</div>
 		<div class="flex items-center">
-			<label class="block font-bold mr-2" for={`inHomeInput-${catchRecord._id}`}>In home:</label>
-			<input
-				type="checkbox"
-				id={`inHomeInput-${catchRecord._id}`}
-				bind:checked={catchRecord.inHome}
-				class="form-checkbox"
-			/>
+			<div class="form-control">
+				<label class="cursor-pointer label">
+					<span class="block font-bold mr-2">In home:</span>
+					<input
+						type="checkbox"
+						bind:checked={catchRecord.inHome}
+						class="checkbox checkbox-primary border-black"
+					/>
+				</label>
+			</div>
 		</div>
 		{#if pokedexEntry.canGigantamax && showForms}
 			<div class="flex items-center">
-				<label class="block font-bold mr-2" for={`hasGigantamaxedInput-${catchRecord._id}`}
-					>Has Gigantamaxed:</label
-				>
-				<input
-					type="checkbox"
-					id={`hasGigantamaxedInput-${catchRecord._id}`}
-					bind:checked={catchRecord.hasGigantamaxed}
-					class="form-checkbox"
-				/>
+				<div class="form-control">
+					<label class="cursor-pointer label">
+						<span class="block font-bold mr-2">Has Gigantamaxed:</span>
+						<input
+							type="checkbox"
+							bind:checked={catchRecord.hasGigantamaxed}
+							class="checkbox checkbox-primary border-black"
+						/>
+					</label>
+				</div>
 			</div>
 		{/if}
 		<p>
@@ -132,19 +140,10 @@
 </div>
 
 <style>
-	.container {
-		max-width: 1000px;
-		margin: 10px;
-	}
-
 	.dex-column {
 		width: 300px;
 	}
 
-	.pokedex-entry-container h3 {
-		color: #ffd700; /* Gold color */
-	}
-
 	.sprite-container {
 		width: 68px;
 		height: 68px;

src/routes/mydex/+page.svelte

@@ -31,6 +31,7 @@
 	}
 
 	async function getData() {
+		combinedData = null;
 		const response = await fetch(`/api/combined-data?page=${currentPage}&limit=${itemsPerPage}`);
 		const data = await response.json();
 
@@ -49,58 +50,72 @@
 	}
 
 	async function updateACatch(catchRecord: CatchRecord) {
-		alert('here');
-		// if (!localUser?.id) {
-		// 	alert('User not signed in');
-		// 	return;
-		// }
+		if (!localUser?.id) {
+			alert('User not signed in');
+			return;
+		}
 
-		// const requestOptions = {
-		// 	method: 'PUT',
-		// 	headers: { 'Content-Type': 'application/json' },
-		// 	body: JSON.stringify(catchRecord)
-		// };
+		const requestOptions = {
+			method: 'PUT',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(catchRecord)
+		};
 
-		// try {
-		// 	const response = await fetch('/api/catch-records', requestOptions);
-		// 	if (!response.ok) {
-		// 		throw new Error('Failed to update catch record');
-		// 	}
+		try {
+			const response = await fetch('/api/catch-records', requestOptions);
+			if (!response.ok) {
+				throw new Error('Failed to update catch record');
+			}
 
-		// 	const updatedRecord = await response.json();
-		// 	console.log('Updated catch record:', updatedRecord);
-		// } catch (error) {
-		// 	console.error('Error updating catch record:', error);
-		// }
+			const updatedRecord = await response.json();
+			console.log('Updated catch record:', updatedRecord);
+		} catch (error) {
+			console.error('Error updating catch record:', error);
+		}
 	}
 </script>
 
-<div class="container mx-auto">
-	{#if combinedData}
-		<div>
-			<button on:click={() => toggleForms()}>Toggle Forms</button>
-			<button on:click={() => toggleOrigins()}>Toggle Origins</button>
+<svelte:head>
+	<title>Living Dex Tracker - My Dex</title>
+</svelte:head>
+
+<div class="flex">
+	<aside class="w-64 bg-gray-800 text-white p-4 fixed h-5/6">
+		<h2 class="text-2xl font-semibold mb-4">Filters</h2>
+		<!-- <ul>
+			<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Dashboard</a></li>
+			<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Profile</a></li>
+			<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Settings</a></li>
+			<li class="mb-2"><a href="#" class="block p-2 hover:bg-gray-700 rounded">Logout</a></li>
+		</ul> -->
+		<div class="mb-4">
+			<button class="btn btn-sm" on:click={() => toggleForms()}>Toggle Forms</button>
+			<button class="btn btn-sm" on:click={() => toggleOrigins()}>Toggle Origins</button>
 		</div>
 
-		<Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
-		{currentPage}
+		<div>
+			<Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
+		</div>
+	</aside>
 
-		{#each combinedData as { pokedexEntry, catchRecord }}
-			<div>
-				<PokedexEntryCatchRecord
-					{pokedexEntry}
-					{showOrigins}
-					{showForms}
-					bind:catchRecord
-					on:updateCatch={() => updateACatch(catchRecord)}
-				/>
-			</div>
-		{/each}
-
-		<Pagination bind:currentPage bind:itemsPerPage bind:totalPages />
-		{currentPage}
-	{:else}
-		<h1>Loading Pokédex</h1>
-		<span class="loading loading-spinner loading-xl"></span>
-	{/if}
+	<main class="flex-1 p-4">
+		<div class="max-w-min mx-auto">
+			{#if combinedData}
+				{#each combinedData as { pokedexEntry, catchRecord }}
+					<PokedexEntryCatchRecord
+						{pokedexEntry}
+						{showOrigins}
+						{showForms}
+						bind:catchRecord
+						on:updateCatch={() => updateACatch(catchRecord)}
+					/>
+				{/each}
+			{: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>
 </div>