From debc58bf26865908cd9bca1bf29e708c8c8da1d1 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Wed, 8 Apr 2026 16:58:15 +0200
Subject: [PATCH] refactor: deduplicate list templates

---
 internal/templates/catalog.templ   | 13 ++++++++++---
 internal/templates/discovery.templ | 25 +------------------------
 internal/templates/index.templ     | 25 +------------------------
 3 files changed, 12 insertions(+), 51 deletions(-)

diff --git a/internal/templates/catalog.templ b/internal/templates/catalog.templ
index 06f4022..d67d480 100644
--- a/internal/templates/catalog.templ
+++ b/internal/templates/catalog.templ
@@ -18,18 +18,21 @@ templ Catalog() {
 	}
 }
 
-templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
+templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, containerID string) {
 	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/catalog?page=%d", nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
+		<div class="scroll-trigger" style="grid-column: 1 / -1; height: 20px;" hx-get={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
 	}
 	<script>
 		(function() {
-			const items = document.querySelectorAll('#catalog-content .catalog-item[data-id]');
+			const containerID = "{" + containerID + "}"; // fallback for string concat in JS
+			const actualID = containerID.replace(/[{}]/g, '');
+			const container = document.getElementById(actualID) || document;
+			const items = container.querySelectorAll('.catalog-item[data-id]');
 			const seen = new Set();
 			items.forEach(item => {
 				const id = item.getAttribute('data-id');
@@ -45,6 +48,10 @@ templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
 	</script>
 }
 
+templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
+	@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))), "catalog-content")
+}
+
 templ CatalogItem(anime jikan.Anime) {
 	<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
 		if anime.ImageURL() != "" {
diff --git a/internal/templates/discovery.templ b/internal/templates/discovery.templ
index 70cf138..2d9fed5 100644
--- a/internal/templates/discovery.templ
+++ b/internal/templates/discovery.templ
@@ -39,28 +39,5 @@ templ Discover() {
 }
 
 templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
-	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/discover/%s?page=%d", listType, nextPage))) } hx-trigger="revealed" hx-swap="outerHTML"></div>
-	}
-	<script>
-		(function() {
-			const items = document.querySelectorAll('#discover-content .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>
+	@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
 }
diff --git a/internal/templates/index.templ b/internal/templates/index.templ
index 3a5f967..62d46e8 100644
--- a/internal/templates/index.templ
+++ b/internal/templates/index.templ
@@ -39,28 +39,5 @@ templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, has
 }
 
 templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
-	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>
+	@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
 }