feat: toggle watchlist on anime cards with auto reload

api/watchlist/handler.go

@@ -172,7 +172,8 @@ func (h *Handler) HandleDeleteWatchlist(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	if r.URL.Query().Get("from") == "watchlist" {
+	from := r.URL.Query().Get("from")
+	if from == "watchlist" {
 		w.WriteHeader(http.StatusOK)
 		return
 	}
@@ -183,6 +184,11 @@ func (h *Handler) HandleDeleteWatchlist(w http.ResponseWriter, r *http.Request)
 		airing = anime.Airing.Bool
 	}
 
+	if from == "card" {
+		watchlist.CardButton(int(animeID), anime.TitleOriginal, title, "", anime.ImageUrl, airing, false).Render(r.Context(), w)
+		return
+	}
+
 	watchlist.WatchlistDropdown(int(animeID), anime.TitleOriginal, title, "", anime.ImageUrl, "", airing).Render(r.Context(), w)
 }
 

web/components/watchlist/card_button.templ

@@ -13,12 +13,15 @@ templ CardButton(
 ) {
 	<button
 		class={ "cursor-pointer border-0 bg-transparent p-0", templ.KV("text-white", inWatchlist), templ.KV("text-white hover:text-white/70", !inWatchlist) }
-		if !inWatchlist {
+		if inWatchlist {
+			hx-delete={ string(templ.URL(fmt.Sprintf("/api/watchlist/%d?from=card", animeID))) }
+		} else {
 			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"
 		}
+		hx-target="this"
+		hx-swap="outerHTML"
+		hx-on::after-swap="window.location.reload()"
 		aria-label={ getWatchlistLabel(inWatchlist) }
 	>
 		<svg width="24" height="24" viewBox="0 0 24 24" fill={ getWatchlistFill(inWatchlist) } xmlns="http://www.w3.org/2000/svg">