feat: add watchlist quick-add button to anime cards

api/watchlist/handler.go

@@ -88,6 +88,60 @@ func (h *Handler) HandleUpdateWatchlist(w http.ResponseWriter, r *http.Request)
 	watchlist.WatchlistDropdown(int(animeID), animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, status, airing).Render(r.Context(), w)
 }
 
+func (h *Handler) HandleCardWatchlist(w http.ResponseWriter, r *http.Request) {
+	if !requireMethod(w, r, http.MethodPost) {
+		return
+	}
+
+	user := middleware.GetUser(r.Context())
+	if user == nil {
+		w.Header().Set("HX-Redirect", "/login")
+		http.Error(w, "Unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	if err := r.ParseForm(); err != nil {
+		http.Error(w, "invalid form", http.StatusBadRequest)
+		return
+	}
+
+	animeIDStr := r.FormValue("anime_id")
+	animeTitle := r.FormValue("anime_title")
+	animeTitleEnglish := r.FormValue("anime_title_english")
+	animeTitleJapanese := r.FormValue("anime_title_japanese")
+	animeImage := r.FormValue("anime_image")
+	airingStr := r.FormValue("airing")
+	airing := airingStr == "true"
+
+	animeID, err := strconv.ParseInt(animeIDStr, 10, 64)
+	if err != nil || animeID <= 0 {
+		http.Error(w, "invalid anime ID", http.StatusBadRequest)
+		return
+	}
+
+	req := AddRequest{
+		AnimeID:       animeID,
+		TitleOriginal: animeTitle,
+		TitleEnglish:  animeTitleEnglish,
+		TitleJapanese: animeTitleJapanese,
+		ImageURL:      animeImage,
+		Status:        "plan_to_watch",
+		Airing:        airing,
+	}
+
+	if err := h.svc.AddEntry(r.Context(), user.ID, req); err != nil {
+		if errors.Is(err, ErrInvalidAnimeID) || errors.Is(err, ErrInvalidStatus) {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+		log.Printf("watchlist card add failed: user_id=%s anime_id=%d err=%v", user.ID, animeID, err)
+		http.Error(w, "failed to update watchlist", http.StatusInternalServerError)
+		return
+	}
+
+	watchlist.CardButton(int(animeID), animeTitle, animeTitleEnglish, animeTitleJapanese, animeImage, airing, true).Render(r.Context(), w)
+}
+
 func (h *Handler) HandleDeleteWatchlist(w http.ResponseWriter, r *http.Request) {
 	if !requireMethod(w, r, http.MethodDelete) {
 		return

internal/server/routes.go

@@ -78,6 +78,7 @@ func NewRouter(cfg Config) http.Handler {
 	// Watchlist Endpoints
 	mux.HandleFunc("/api/watchlist/export", watchlistHandler.HandleExportWatchlist)
 	mux.HandleFunc("/api/watchlist/import", watchlistHandler.HandleImportWatchlist)
+	mux.HandleFunc("/api/watchlist/card", watchlistHandler.HandleCardWatchlist)
 	mux.HandleFunc("/api/watchlist", watchlistHandler.HandleUpdateWatchlist)
 	mux.HandleFunc("/api/watchlist/", watchlistHandler.HandleDeleteWatchlist)
 	mux.HandleFunc("/api/continue-watching/", watchlistHandler.HandleDeleteContinueWatching)

web/components/anime/recommendations.templ

@@ -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,
+					ID:            anime.MalID,
-					Title:    anime.DisplayTitle(),
+					Title:         anime.DisplayTitle(),
-					ImageURL: anime.ImageURL(),
+					ImageURL:      anime.ImageURL(),
-					Synopsis: anime.Synopsis,
+					TitleEnglish:  anime.TitleEnglish,
+					TitleJapanese: anime.TitleJapanese,
+					Airing:        anime.Airing,
+					Synopsis:      anime.Synopsis,
 				})
 			}
 		</div>

web/components/anime/relations.templ

@@ -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,
+					ID:            rel.Anime.MalID,
-					Title:       rel.Anime.DisplayTitle(),
+					Title:         rel.Anime.DisplayTitle(),
-					ImageURL:    rel.Anime.ImageURL(),
+					ImageURL:      rel.Anime.ImageURL(),
-					CurrentNode: rel.IsCurrent,
+					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>

web/components/anime_card.templ

@@ -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 != "" {
+		if props.PlayHref != "" || !props.CurrentNode {
-			<a
+			<div class="absolute bottom-2 left-2 z-10 flex gap-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
-				href={ templ.URL(props.PlayHref) }
+				if props.PlayHref != "" {
-				class="absolute bottom-2 left-2 z-10 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+					<a
-				aria-label="Play"
+						href={ templ.URL(props.PlayHref) }
-			>
+						class="text-white"
-				<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+						aria-label="Play"
-					<path d="M8 5V19L19 12L8 5Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+					>
-				</svg>
+						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-			</a>
+							<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>
 }

web/components/anime_list.templ

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

web/components/watchlist/card_button.templ

@@ -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"
+}

web/templates/continue_watching.templ

@@ -1,6 +1,7 @@
 package templates
 
 import (
+	"database/sql"
 	"fmt"
 	db "mal/internal/db"
 	ui "mal/web/components"
@@ -21,14 +22,17 @@ templ ContinueWatching(entries []db.GetContinueWatchingEntriesRow) {
 				<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:gap-4 lg:grid-cols-4 xl:grid-cols-5">
 					for _, entry := range entries {
 						<div class="group relative min-w-0" id={ fmt.Sprintf("continue-entry-%d", entry.AnimeID) }>
-							@ui.AnimeCard(ui.AnimeCardProps{
+						@ui.AnimeCard(ui.AnimeCardProps{
-								ID:        int(entry.AnimeID),
+							ID:              int(entry.AnimeID),
-								Title:     displayContinueWatchingTitle(entry),
+							Title:           displayContinueWatchingTitle(entry),
-								ImageURL:  entry.ImageUrl,
+							ImageURL:        entry.ImageUrl,
-								Href:      continueWatchingURL(entry),
+							Href:            continueWatchingURL(entry),
-								Class:     "notification-card min-w-0 flex flex-col bg-transparent text-inherit no-underline",
+							TitleEnglish:    nullString(entry.TitleEnglish),
-								HideTitle: true,
+							TitleJapanese:   nullString(entry.TitleJapanese),
-							}) {
+							WatchlistStatus: "watching",
+							Class:           "notification-card min-w-0 flex flex-col bg-transparent text-inherit no-underline",
+							HideTitle:       true,
+						}) {
 								<div class="mt-2 grid gap-1 p-0">
 									<div class="line-clamp-2 text-sm leading-snug text-(--text)">{ displayContinueWatchingTitle(entry) }</div>
 									<div class="flex flex-wrap gap-2">
@@ -67,3 +71,10 @@ func continueWatchingURL(entry db.GetContinueWatchingEntriesRow) string {
 func displayContinueWatchingTitle(entry db.GetContinueWatchingEntriesRow) string {
 	return db.DisplayTitle(entry.TitleEnglish, entry.TitleJapanese, entry.TitleOriginal)
 }
+
+func nullString(s sql.NullString) string {
+	if s.Valid {
+		return s.String
+	}
+	return ""
+}

web/templates/studio.templ

@@ -45,9 +45,12 @@ 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,
+								ID:            anime.MalID,
-								Title:    anime.DisplayTitle(),
+								Title:         anime.DisplayTitle(),
-								ImageURL: anime.ImageURL(),
+								ImageURL:      anime.ImageURL(),
+								TitleEnglish:  anime.TitleEnglish,
+								TitleJapanese: anime.TitleJapanese,
+								Airing:        anime.Airing,
 							})
 						</div>
 					}
@@ -73,9 +76,12 @@ templ StudioAnimeItems(animes []jikan.Anime, hasNext bool, studioID int, nextPag
 	for _, anime := range animes {
 		<div class="min-w-0" data-id={ fmt.Sprintf("%d", anime.MalID) }>
 			@components.AnimeCard(components.AnimeCardProps{
-				ID:       anime.MalID,
+				ID:            anime.MalID,
-				Title:    anime.DisplayTitle(),
+				Title:         anime.DisplayTitle(),
-				ImageURL: anime.ImageURL(),
+				ImageURL:      anime.ImageURL(),
+				TitleEnglish:  anime.TitleEnglish,
+				TitleJapanese: anime.TitleJapanese,
+				Airing:        anime.Airing,
 			})
 		</div>
 	}