melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add watchlist quick-add button to anime cards

Browse Source
This commit is contained in:
mkelvers
2026-04-21 00:34:13 +02:00
parent bda7afa31d
commit a5f2628d1e
9 changed files with 187 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/components/anime/recommendations.templ
View File

@@ -10,10 +10,13 @@ templ Recommendations(recs []jikan.Anime) {
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6">
for _, anime := range recs {
@ui.AnimeCard(ui.AnimeCardProps{
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
Synopsis: anime.Synopsis,
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
TitleEnglish: anime.TitleEnglish,
TitleJapanese: anime.TitleJapanese,
Airing: anime.Airing,
Synopsis: anime.Synopsis,
})
}
</div>

11
web/components/anime/relations.templ
View File

@@ -10,10 +10,13 @@ templ RelationsList(relations []jikan.RelationEntry) {
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-6" id="relations-grid">
for _, rel := range relations {
@ui.AnimeCard(ui.AnimeCardProps{
ID: rel.Anime.MalID,
Title: rel.Anime.DisplayTitle(),
ImageURL: rel.Anime.ImageURL(),
CurrentNode: rel.IsCurrent,
ID: rel.Anime.MalID,
Title: rel.Anime.DisplayTitle(),
ImageURL: rel.Anime.ImageURL(),
TitleEnglish: rel.Anime.TitleEnglish,
TitleJapanese: rel.Anime.TitleJapanese,
Airing: rel.Anime.Airing,
CurrentNode: rel.IsCurrent,
}) {
if rel.IsCurrent {
<div class="mt-2 h-0.5 w-10 bg-white"></div>

47
web/components/anime_card.templ
View File

@@ -1,6 +1,10 @@
package ui
import "fmt"
import (
"fmt"
"mal/web/components/watchlist"
)
type AnimeCardProps struct {
ID int
@@ -15,6 +19,11 @@ type AnimeCardProps struct {
CurrentNode bool // if true, renders a div instead of an anchor tag (useful for graph nodes)
Synopsis string // optional synopsis for hover detail
PlayHref string // optional play button href (anchored to poster)
// Watchlist integration
TitleEnglish string
TitleJapanese string
Airing bool
WatchlistStatus string // empty if not in watchlist
}
templ AnimeCard(props AnimeCardProps) {
@@ -68,16 +77,32 @@ templ animeCardPoster(props AnimeCardProps) {
</div>
</div>
}
if props.PlayHref != "" {
<a
href={ templ.URL(props.PlayHref) }
class="absolute bottom-2 left-2 z-10 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100"
aria-label="Play"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5V19L19 12L8 5Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
</a>
if props.PlayHref != "" || !props.CurrentNode {
<div class="absolute bottom-2 left-2 z-10 flex gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
if props.PlayHref != "" {
<a
href={ templ.URL(props.PlayHref) }
class="text-white"
aria-label="Play"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Play</title>
<path d="M8 5V19L19 12L8 5Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
</a>
}
if !props.CurrentNode {
@watchlist.CardButton(
props.ID,
props.Title,
props.TitleEnglish,
props.TitleJapanese,
props.ImageURL,
props.Airing,
props.WatchlistStatus != "",
)
}
</div>
}
</div>
}

13
web/components/anime_list.templ
View File

@@ -31,10 +31,13 @@ templ InfiniteAnimeList(animes []jikan.Anime, hasNext bool, nextURL string, cont
templ CatalogItem(anime jikan.Anime) {
@AnimeCard(AnimeCardProps{
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
Synopsis: anime.Synopsis,
PlayHref: fmt.Sprintf("/watch/%d/1", anime.MalID),
ID: anime.MalID,
Title: anime.DisplayTitle(),
ImageURL: anime.ImageURL(),
TitleEnglish: anime.TitleEnglish,
TitleJapanese: anime.TitleJapanese,
Airing: anime.Airing,
Synopsis: anime.Synopsis,
PlayHref: fmt.Sprintf("/watch/%d/1", anime.MalID),
})
}

43
web/components/watchlist/card_button.templ Normal file
View File

@@ -0,0 +1,43 @@
package watchlist
import "fmt"
templ CardButton(
animeID int,
title string,
titleEnglish string,
titleJapanese string,
imageURL string,
airing bool,
inWatchlist bool,
) {
<button
class={ "cursor-pointer border-0 bg-transparent p-0", templ.KV("text-blue-500", inWatchlist), templ.KV("text-white hover:text-blue-400", !inWatchlist) }
if !inWatchlist {
hx-post="/api/watchlist/card"
hx-vals={ fmt.Sprintf(`{"anime_id": "%d", "anime_title": "%s", "anime_title_english": "%s", "anime_title_japanese": "%s", "anime_image": "%s", "airing": "%v"}`, animeID, title, titleEnglish, titleJapanese, imageURL, airing) }
hx-target="this"
hx-swap="outerHTML"
}
aria-label={ getWatchlistLabel(inWatchlist) }
>
<svg width="24" height="24" viewBox="0 0 24 24" fill={ getWatchlistFill(inWatchlist) } xmlns="http://www.w3.org/2000/svg">
<title>{ getWatchlistLabel(inWatchlist) }</title>
<path d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
</svg>
</button>
}
func getWatchlistFill(inWatchlist bool) string {
if inWatchlist {
return "currentColor"
}
return "none"
}
func getWatchlistLabel(inWatchlist bool) string {
if inWatchlist {
return "In watchlist"
}
return "Add to watchlist"
}