fix: resolve infinite scroll duplication issues

internal/templates/index.templ

@@ -39,15 +39,28 @@ templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, has
 }
 
 templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
-	for i, anime := range animes {
-		if i == len(animes)-1 && hasNext {
-			<div class="catalog-item" hx-get={ string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))) } hx-trigger="revealed" hx-swap="afterend">
-				@CatalogItem(anime)
-			</div>
-		} else {
-			<div class="catalog-item">
-				@CatalogItem(anime)
-			</div>
-		}
+	for _, anime := range animes {
+		<div class="catalog-item" data-id={ fmt.Sprintf("%d", anime.MalID) }>
+			@CatalogItem(anime)
+		</div>
 	}
+	if hasNext {
+		<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
+	}
+	<script>
+		(function() {
+			const items = document.querySelectorAll('#results .catalog-item[data-id]');
+			const seen = new Set();
+			items.forEach(item => {
+				const id = item.getAttribute('data-id');
+				if (id) {
+					if (seen.has(id)) {
+						item.remove();
+					} else {
+						seen.add(id);
+					}
+				}
+			});
+		})();
+	</script>
 }