ui: extract infinite anime list and catalog item to shared ui component

internal/shared/ui/anime_list.templ

@@ -0,0 +1,49 @@
+package ui
+
+import (
+	"fmt"
+	"mal/internal/jikan"
+)
+
+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={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
+	}
+	<script>
+		(function() {
+			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');
+				if (id) {
+					if (seen.has(id)) {
+						item.remove();
+					} else {
+						seen.add(id);
+					}
+				}
+			});
+		})();
+	</script>
+}
+
+templ CatalogItem(anime jikan.Anime) {
+	<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
+		if anime.ImageURL() != "" {
+			<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
+		} else {
+			<div class="no-image">No image</div>
+		}
+	</a>
+	<div class="catalog-title">
+		{ anime.DisplayTitle() }
+	</div>
+}

internal/templates/catalog.templ

@@ -14,49 +14,6 @@ templ Catalog() {
 	}
 }
 
-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={ nextURL } hx-trigger="revealed" hx-swap="outerHTML"></div>
-	}
-	<script>
-		(function() {
-			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');
-				if (id) {
-					if (seen.has(id)) {
-						item.remove();
-					} else {
-						seen.add(id);
-					}
-				}
-			});
-		})();
-	</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")
+	@ui.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() != "" {
-			<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
-		} else {
-			<div class="no-image">No image</div>
-		}
-	</a>
-	<div class="catalog-title">
-		{ anime.DisplayTitle() }
-	</div>
 }

internal/templates/discovery.templ

@@ -1,6 +1,7 @@
 package templates
 
 import "mal/internal/jikan"
+import "mal/internal/shared/ui"
 import "fmt"
 
 templ Discover() {
@@ -27,11 +28,8 @@ templ Discover() {
 				</button>
 			</div>
 			<div class="catalog-grid" id="discover-content" hx-get="/api/discover/airing?page=1" hx-trigger="load">
-				<div class="loading-indicator" style="grid-column: 1 / -1;">
+				<div style="grid-column: 1 / -1;">
-					<div class="loading-dot"></div>
+					@ui.LoadingIndicator("Loading discover")
-					<div class="loading-dot"></div>
-					<div class="loading-dot"></div>
-					<span>Loading discover</span>
 				</div>
 			</div>
 		</div>
@@ -39,5 +37,5 @@ templ Discover() {
 }
 
 templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
-	@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
+	@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
 }

internal/templates/index.templ

@@ -35,5 +35,5 @@ templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, has
 }
 
 templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
-	@InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
+	@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
 }