feat: persist watchlist status on anime cards with white bookmark and outline play button

This commit is contained in:
2026-04-21 00:41:23 +02:00
parent a5f2628d1e
commit cd8df7d2bf
10 changed files with 89 additions and 63 deletions

View File

@@ -15,8 +15,8 @@ templ Catalog() {
}
}
templ CatalogItems(animes []jikan.Anime, nextPage int, hasNext bool) {
@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))), "catalog-content")
templ CatalogItems(animes []jikan.Anime, watchlistStatuses map[int]string, nextPage int, hasNext bool) {
@ui.InfiniteAnimeList(animes, watchlistStatuses, hasNext, string(templ.URL(fmt.Sprintf("/api/catalog?page=%d", nextPage))), "catalog-content")
}
templ CatalogPlaceholderItems(count int) {

View File

@@ -47,6 +47,6 @@ templ Discover() {
}
}
templ DiscoverItems(animes []jikan.Anime, listType string, nextPage int, hasNext bool) {
@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
templ DiscoverItems(animes []jikan.Anime, watchlistStatuses map[int]string, listType string, nextPage int, hasNext bool) {
@ui.InfiniteAnimeList(animes, watchlistStatuses, hasNext, string(templ.URL(fmt.Sprintf("/api/discover/%s?page=%d", listType, nextPage))), "discover-content")
}

View File

@@ -23,18 +23,18 @@ templ Search(q string) {
}
}
templ SearchResultsWrapper(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
templ SearchResultsWrapper(query string, animes []jikan.Anime, watchlistStatuses map[int]string, nextPage int, hasNext bool) {
if len(animes) == 0 {
@ui.EmptyState("No results found.") {
Try a different search term.
}
} else {
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5">
@SearchItems(query, animes, nextPage, hasNext)
@SearchItems(query, animes, watchlistStatuses, nextPage, hasNext)
</div>
}
}
templ SearchItems(query string, animes []jikan.Anime, nextPage int, hasNext bool) {
@ui.InfiniteAnimeList(animes, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
templ SearchItems(query string, animes []jikan.Anime, watchlistStatuses map[int]string, nextPage int, hasNext bool) {
@ui.InfiniteAnimeList(animes, watchlistStatuses, hasNext, string(templ.URL(fmt.Sprintf("/api/search?q=%s&page=%d", url.QueryEscape(query), nextPage))), "results")
}

View File

@@ -9,7 +9,7 @@ import (
"mal/web/shared/layout"
)
templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNext bool, nextPage int) {
templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, watchlistStatuses map[int]string, hasNext bool, nextPage int) {
@layout.Layout("mal - "+shared.GetProducerName(producer), true) {
<div class="grid gap-5">
<div class="grid gap-4 bg-(--panel) p-4">
@@ -45,12 +45,13 @@ templ StudioDetails(producer jikan.ProducerResponse, animes []jikan.Anime, hasNe
for _, anime := range animes {
<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@components.AnimeCard(components.AnimeCardProps{
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
TitleEnglish: anime.TitleEnglish,
TitleJapanese: anime.TitleJapanese,
Airing: anime.Airing,
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
TitleEnglish: anime.TitleEnglish,
TitleJapanese: anime.TitleJapanese,
Airing: anime.Airing,
WatchlistStatus: watchlistStatuses[anime.MalID],
})
</div>
}
@@ -72,16 +73,17 @@ templ StudioLoadMore(studioID int, nextPage int) {
></div>
}
templ StudioAnimeItems(animes []jikan.Anime, hasNext bool, studioID int, nextPage int) {
templ StudioAnimeItems(animes []jikan.Anime, watchlistStatuses map[int]string, hasNext bool, studioID int, nextPage int) {
for _, anime := range animes {
<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
@components.AnimeCard(components.AnimeCardProps{
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
TitleEnglish: anime.TitleEnglish,
TitleJapanese: anime.TitleJapanese,
Airing: anime.Airing,
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
TitleEnglish: anime.TitleEnglish,
TitleJapanese: anime.TitleJapanese,
Airing: anime.Airing,
WatchlistStatus: watchlistStatuses[anime.MalID],
})
</div>
}