ui: extract generic AnimeCard component and adopt in watchlist and catalog

internal/shared/ui/anime_card.templ

@@ -0,0 +1,22 @@
+package ui
+
+import "fmt"
+
+type AnimeCardProps struct {
+	ID       int
+	Title    string
+	ImageURL string
+}
+
+templ AnimeCard(props AnimeCardProps) {
+	<a href={ templ.URL(fmt.Sprintf("/anime/%d", props.ID)) }>
+		if props.ImageURL != "" {
+			<img src={ props.ImageURL } alt={ props.Title } class="catalog-thumb" loading="lazy"/>
+		} else {
+			<div class="no-image">No image</div>
+		}
+	</a>
+	<div class="catalog-title">
+		{ props.Title }
+	</div>
+}

internal/shared/ui/anime_list.templ

@@ -36,14 +36,9 @@ templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, cont
 }
 
 templ CatalogItem(anime jikan.Anime) {
-	<a href={ templ.URL(fmt.Sprintf("/anime/%d", anime.MalID)) }>
+	@AnimeCard(AnimeCardProps{
-		if anime.ImageURL() != "" {
+		ID:       anime.MalID,
-			<img src={ anime.ImageURL() } alt={ anime.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
+		Title:    anime.DisplayTitle(),
-		} else {
+		ImageURL: anime.ImageURL(),
-			<div class="no-image">No image</div>
+	})
-		}
-	</a>
-	<div class="catalog-title">
-		{ anime.DisplayTitle() }
-	</div>
 }

internal/templates/watchlist.templ

@@ -47,14 +47,11 @@ templ Watchlist(entries []database.GetUserWatchListRow, layout string, currentSt
 				<div class="catalog-grid">
 					for _, entry := range entries {
 						<div class="catalog-item watchlist-item" id={ fmt.Sprintf("watchlist-entry-%d", entry.AnimeID) }>
-							<a href={ templ.URL(fmt.Sprintf("/anime/%d", entry.AnimeID)) }>
+							@ui.AnimeCard(ui.AnimeCardProps{
-								if entry.ImageUrl != "" {
+								ID:       int(entry.AnimeID),
-									<img src={ entry.ImageUrl } alt={ entry.DisplayTitle() } class="catalog-thumb" loading="lazy"/>
+								Title:    entry.DisplayTitle(),
-								} else {
+								ImageURL: entry.ImageUrl,
-									<div class="no-image">No image</div>
+							})
-								}
-							</a>
-							<div class="catalog-title">{ entry.DisplayTitle() }</div>
 							<button
 								class="remove-btn"
 								hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d?from=watchlist", entry.AnimeID))) }