feat(catalogue): Add sorting

src/components/catalogue/Core.astro

@@ -34,6 +34,15 @@ const pageLenth = 30;
 					<option value="hated">Hated</option>
 				</select>
 			</div>
+
+			<div>
+				<label for="catalogue-sort">Sort</label>
+				<select name="sort" id="catalogue-sort">
+					<option value="date">Date</option>
+					<option value="rating">Rating</option>
+					<option value="alphabetical">Title</option>
+				</select>
+			</div>
 		</div>
 		<div id="catalogue-entry-count" class="flex items-center justify-end sm:justify-start">
 			... entries
@@ -59,6 +68,7 @@ const pageLenth = 30;
 <script>
 	const searchInput = document.getElementById("catalogue-search") as HTMLInputElement;
 	const ratingSelect = document.getElementById("catalogue-ratings") as HTMLSelectElement;
+	const sortSelect = document.getElementById("catalogue-sort") as HTMLSelectElement;
 	const typeSelect = document.getElementById("catalogue-types") as HTMLSelectElement;
 	const seeMoreButton = document.getElementById("catalogue-seemore") as HTMLButtonElement;
 	const content = document.getElementById("catalogue-content") as HTMLDivElement;
@@ -76,6 +86,9 @@ const pageLenth = 30;
 
 	function updateCurrentPage(value: number) {
 		_currentPage = value;
+	}
+
+	function updateSeeMoreButton() {
 		seeMoreButton.disabled = _currentPage === serverStatus.totalPages;
 	}
 
@@ -85,19 +98,22 @@ const pageLenth = 30;
 		searchDebounce = setTimeout(async () => {
 			updateCurrentPage(1);
 			await buildLibrary();
+			updateSeeMoreButton();
 		}, 75);
 	});
 
-	[ratingSelect, typeSelect].forEach((select) => {
+	[ratingSelect, typeSelect, sortSelect].forEach((select) => {
 		select.addEventListener("change", async () => {
 			updateCurrentPage(1);
 			await buildLibrary();
+			updateSeeMoreButton();
 		});
 	});
 
 	seeMoreButton.addEventListener("click", async () => {
 		updateCurrentPage(_currentPage + 1);
 		await buildLibrary(true);
+		updateSeeMoreButton();
 	});
 
 	await buildLibrary();
@@ -132,6 +148,7 @@ const pageLenth = 30;
 		url.searchParams.append("search", searchInput.value);
 		url.searchParams.append("type", typeSelect.value);
 		url.searchParams.append("rating", ratingSelect.value);
+		url.searchParams.append("sort", sortSelect.value);
 		url.searchParams.append("page", _currentPage.toString());
 
 		return url;