feat: add toggle watchlist on anime cards and improve dropdown

2026-05-02 15:28:37 +02:00
parent 94e60e0d8b
commit cc9ca1ba9e
14 changed files with 396 additions and 76 deletions
--- a/api/anime/handler.go
+++ b/api/anime/handler.go
@@ -83,9 +83,17 @@ func (h *Handler) HandleCatalog(w http.ResponseWriter, r *http.Request) {
 	// We'll skip DB fetch for continue watching for now if it requires complex session parsing
 	// Actually we should try to fetch it if we can.
 	var cw []database.GetContinueWatchingEntriesRow
+	watchlistMap := make(map[int64]bool)
+	var watchlistIDs []int64
 	user, userOk := r.Context().Value(ctxpkg.UserKey).(*database.User)
 	if userOk && user != nil {
 		cw, _ = h.db.GetContinueWatchingEntries(r.Context(), user.ID)
+		watchlist, _ := h.db.GetUserWatchList(r.Context(), user.ID)
+		watchlistIDs = make([]int64, len(watchlist))
+		for i, entry := range watchlist {
+			watchlistMap[entry.AnimeID] = true
+			watchlistIDs[i] = entry.AnimeID
+		}
 	}

 	if err := templates.GetRenderer().ExecuteTemplate(w, "index.gohtml", map[string]any{
@@ -94,6 +102,8 @@ func (h *Handler) HandleCatalog(w http.ResponseWriter, r *http.Request) {
 		"ContinueWatching": cw,
 		"User":             user,
 		"CurrentPath":      r.URL.Path,
+		"WatchlistMap":     watchlistMap,
+		"WatchlistIDs":     watchlistIDs,
 	}); err != nil {
 		log.Printf("render error: %v", err)
 		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
@@ -114,15 +124,28 @@ func (h *Handler) HandleBrowse(w http.ResponseWriter, r *http.Request) {
 		log.Printf("browse error: %v", err)
 	}

+	watchlistMap := make(map[int64]bool)
+	var watchlistIDs []int64
+	if user != nil {
+		watchlist, _ := h.db.GetUserWatchList(r.Context(), user.ID)
+		watchlistIDs = make([]int64, len(watchlist))
+		for i, entry := range watchlist {
+			watchlistMap[entry.AnimeID] = true
+			watchlistIDs[i] = entry.AnimeID
+		}
+	}
+
 	if err := templates.GetRenderer().ExecuteTemplate(w, "browse.gohtml", map[string]any{
-		"User":        user,
-		"CurrentPath": r.URL.Path,
-		"Query":       q,
-		"Type":        animeType,
-		"Status":      status,
-		"OrderBy":     orderBy,
-		"Sort":        sort,
-		"Animes":      res.Animes,
+		"User":         user,
+		"CurrentPath":  r.URL.Path,
+		"Query":        q,
+		"Type":         animeType,
+		"Status":       status,
+		"OrderBy":      orderBy,
+		"Sort":         sort,
+		"Animes":       res.Animes,
+		"WatchlistMap": watchlistMap,
+		"WatchlistIDs": watchlistIDs,
 	}); err != nil {
 		log.Printf("render error: %v", err)
 		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
--- a/api/watchlist/handler.go
+++ b/api/watchlist/handler.go
@@ -1,9 +1,13 @@
 package watchlist

 import (
+	"encoding/json"
 	"log"
 	"net/http"
+	"strconv"

+	ctxpkg "mal/internal/context"
+	database "mal/internal/db"
 	"mal/templates"
 )

@@ -20,11 +24,61 @@ func (h *Handler) HandleCardWatchlist(w http.ResponseWriter, r *http.Request) {
 }

 func (h *Handler) HandleUpdateWatchlist(w http.ResponseWriter, r *http.Request) {
-	http.Error(w, "Not implemented", http.StatusNotImplemented)
+	if r.Method != http.MethodPost {
+		http.Error(w, "method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	user, _ := r.Context().Value(ctxpkg.UserKey).(*database.User)
+	if user == nil {
+		http.Error(w, "unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	var body struct {
+		AnimeID int64  `json:"animeId"`
+		Status  string `json:"status"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		http.Error(w, "invalid request", http.StatusBadRequest)
+		return
+	}
+
+	if body.Status == "" {
+		body.Status = "plan_to_watch"
+	}
+
+	if err := h.service.AddToWatchlist(r.Context(), user.ID, body.AnimeID, body.Status); err != nil {
+		log.Printf("failed to add to watchlist: %v", err)
+		http.Error(w, "failed to add to watchlist", http.StatusInternalServerError)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
 }

 func (h *Handler) HandleDeleteWatchlist(w http.ResponseWriter, r *http.Request) {
-	http.Error(w, "Not implemented", http.StatusNotImplemented)
+	user, _ := r.Context().Value(ctxpkg.UserKey).(*database.User)
+	if user == nil {
+		http.Error(w, "unauthorized", http.StatusUnauthorized)
+		return
+	}
+
+	animeIDStr := r.URL.Path[len("/api/watchlist/"):]
+	animeID, err := strconv.ParseInt(animeIDStr, 10, 64)
+	if err != nil {
+		http.Error(w, "invalid anime id", http.StatusBadRequest)
+		return
+	}
+
+	if _, err := h.service.RemoveEntry(r.Context(), user.ID, animeID); err != nil {
+		log.Printf("failed to remove from watchlist: %v", err)
+		http.Error(w, "failed to remove from watchlist", http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("HX-Redirect", "/watchlist")
+	w.WriteHeader(http.StatusOK)
 }

 func (h *Handler) HandleDeleteContinueWatching(w http.ResponseWriter, r *http.Request) {
@@ -32,9 +86,55 @@ func (h *Handler) HandleDeleteContinueWatching(w http.ResponseWriter, r *http.Re
 }

 func (h *Handler) HandleGetWatchlist(w http.ResponseWriter, r *http.Request) {
-	if err := templates.GetRenderer().ExecuteTemplate(w, "not_found.gohtml", map[string]any{
-		"CurrentPath": r.URL.Path,
-	}); err != nil {
+	user, _ := r.Context().Value(ctxpkg.UserKey).(*database.User)
+	if user == nil {
+		http.Redirect(w, r, "/login", http.StatusSeeOther)
+		return
+	}
+
+	entries, err := h.service.GetUserWatchlist(r.Context(), user.ID)
+	if err != nil {
+		log.Printf("failed to fetch watchlist: %v", err)
+		if err := templates.GetRenderer().ExecuteTemplate(w, "not_found.gohtml", map[string]any{
+			"CurrentPath": r.URL.Path,
+		}); err != nil {
+			log.Printf("render error: %v", err)
+		}
+		return
+	}
+
+	watchlistByStatus := make(map[string][]database.GetUserWatchListRow)
+	allEntries := make([]database.GetUserWatchListRow, 0)
+
+	for _, entry := range entries {
+		status := entry.Status
+		if status == "" {
+			status = "plan_to_watch"
+		}
+		watchlistByStatus[status] = append(watchlistByStatus[status], entry)
+		allEntries = append(allEntries, entry)
+	}
+
+	data := map[string]any{
+		"CurrentPath":       r.URL.Path,
+		"WatchlistByStatus": watchlistByStatus,
+		"AllEntries":        allEntries,
+		"StatusOrder":       []string{"watching", "plan_to_watch", "on_hold", "completed", "dropped"},
+		"StatusLabels": map[string]string{
+			"watching":      "Currently Watching",
+			"plan_to_watch": "Plan to Watch",
+			"on_hold":       "On Hold",
+			"completed":     "Completed",
+			"dropped":       "Dropped",
+		},
+	}
+
+	templateName := "watchlist.gohtml"
+	if r.Header.Get("HX-Request") == "true" {
+		templateName = "watchlist_partial.gohtml"
+	}
+
+	if err := templates.GetRenderer().ExecuteTemplate(w, templateName, data); err != nil {
 		log.Printf("render error: %v", err)
 	}
 }
--- a/api/watchlist/service.go
+++ b/api/watchlist/service.go
@@ -9,12 +9,14 @@ import (

 	"github.com/google/uuid"

+	"mal/integrations/jikan"
 	"mal/internal/db"
 )

 type Service struct {
-	db    database.Querier
-	sqlDB *sql.DB
+	db          database.Querier
+	sqlDB       *sql.DB
+	jikanClient *jikan.Client
 }

 var (
@@ -23,13 +25,41 @@ var (
 )

 var validStatuses = map[string]struct{}{
+	"watching":      {},
 	"completed":     {},
 	"dropped":       {},
 	"plan_to_watch": {},
+	"on_hold":       {},
 }

-func NewService(db database.Querier, sqlDB *sql.DB) *Service {
-	return &Service{db: db, sqlDB: sqlDB}
+func NewService(db database.Querier, sqlDB *sql.DB, jikanClient *jikan.Client) *Service {
+	return &Service{db: db, sqlDB: sqlDB, jikanClient: jikanClient}
+}
+
+func (s *Service) ensureAnimeExists(ctx context.Context, animeID int64) error {
+	_, err := s.db.GetAnime(ctx, animeID)
+	if err == nil {
+		return nil
+	}
+
+	anime, err := s.jikanClient.GetAnimeByID(ctx, int(animeID))
+	if err != nil {
+		return fmt.Errorf("failed to fetch anime from jikan: %w", err)
+	}
+
+	_, err = s.db.UpsertAnime(ctx, database.UpsertAnimeParams{
+		ID:            int64(anime.MalID),
+		TitleOriginal: anime.Title,
+		TitleEnglish:  sql.NullString{String: anime.TitleEnglish, Valid: anime.TitleEnglish != ""},
+		TitleJapanese: sql.NullString{String: anime.TitleJapanese, Valid: anime.TitleJapanese != ""},
+		ImageUrl:      anime.Images.Jpg.LargeImageURL,
+		Airing:        sql.NullBool{Bool: anime.Airing, Valid: true},
+	})
+	if err != nil {
+		return fmt.Errorf("failed to save anime: %w", err)
+	}
+
+	return nil
 }

 type AddRequest struct {
@@ -42,34 +72,26 @@ type AddRequest struct {
 	Airing        bool
 }

-func (s *Service) AddEntry(ctx context.Context, userID string, req AddRequest) error {
-	if req.AnimeID <= 0 {
+func (s *Service) AddToWatchlist(ctx context.Context, userID string, animeID int64, status string) error {
+	if animeID <= 0 {
 		return ErrInvalidAnimeID
 	}

-	if _, ok := validStatuses[req.Status]; !ok {
+	if _, ok := validStatuses[status]; !ok {
 		return ErrInvalidStatus
 	}

-	_, err := s.db.UpsertAnime(ctx, database.UpsertAnimeParams{
-		ID:            req.AnimeID,
-		TitleOriginal: req.TitleOriginal,
-		TitleEnglish:  sql.NullString{String: req.TitleEnglish, Valid: req.TitleEnglish != ""},
-		TitleJapanese: sql.NullString{String: req.TitleJapanese, Valid: req.TitleJapanese != ""},
-		ImageUrl:      req.ImageURL,
-		Airing:        sql.NullBool{Bool: req.Airing, Valid: true},
-	})
-	if err != nil {
-		return fmt.Errorf("failed to save anime reference: %w", err)
+	if err := s.ensureAnimeExists(ctx, animeID); err != nil {
+		return err
 	}

 	entryID := uuid.New().String()
-	_, err = s.db.UpsertWatchListEntry(ctx, database.UpsertWatchListEntryParams{
+	_, err := s.db.UpsertWatchListEntry(ctx, database.UpsertWatchListEntryParams{
 		ID:                 entryID,
 		UserID:             userID,
-		AnimeID:            req.AnimeID,
-		Status:             req.Status,
-		CurrentEpisode:     sql.NullInt64{Int64: 0, Valid: false},
+		AnimeID:            animeID,
+		Status:             status,
+		CurrentEpisode:     sql.NullInt64{Valid: false},
 		CurrentTimeSeconds: 0,
 	})
 	if err != nil {
--- a/internal/server/routes.go
+++ b/internal/server/routes.go
@@ -46,7 +46,7 @@ func NewRouter(cfg Config) http.Handler {

 	authHandler := auth.NewHandler(cfg.AuthService)

-	watchlistSvc := watchlist.NewService(cfg.DB, cfg.SQLDB)
+	watchlistSvc := watchlist.NewService(cfg.DB, cfg.SQLDB, cfg.JikanClient)
 	watchlistHandler := watchlist.NewHandler(watchlistSvc)

 	middleware.InitAuth(cfg.AuthService)
--- a/migrations/014_add_watchlist_statuses.sql
+++ b/migrations/014_add_watchlist_statuses.sql
@@ -0,0 +1,26 @@
+-- Add "watching" and "on_hold" to the valid statuses for watch_list_entry
+
+PRAGMA foreign_keys=OFF;
+
+ALTER TABLE watch_list_entry RENAME TO watch_list_entry_old;
+
+CREATE TABLE IF NOT EXISTS watch_list_entry (
+    id TEXT PRIMARY KEY,
+    user_id TEXT NOT NULL REFERENCES user(id) ON DELETE CASCADE,
+    anime_id INTEGER NOT NULL REFERENCES anime(id) ON DELETE CASCADE,
+    status TEXT NOT NULL CHECK(status IN ('watching', 'completed', 'dropped', 'plan_to_watch', 'on_hold')),
+    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    current_episode INTEGER DEFAULT 0,
+    last_episode_at DATETIME,
+    current_time_seconds REAL NOT NULL DEFAULT 0,
+    UNIQUE(user_id, anime_id)
+);
+
+INSERT OR IGNORE INTO watch_list_entry (id, user_id, anime_id, status, created_at, updated_at, current_episode, last_episode_at, current_time_seconds)
+SELECT id, user_id, anime_id, status, created_at, updated_at, current_episode, last_episode_at, current_time_seconds
+FROM watch_list_entry_old;
+
+DROP TABLE watch_list_entry_old;
+
+PRAGMA foreign_keys=ON;
--- a/static/dropdown.ts
+++ b/static/dropdown.ts
@@ -1,6 +1,7 @@
 class UIDropdown extends HTMLElement {
  isOpen: boolean = false
  contentEl: HTMLElement | null = null
+  isClosing: boolean = false

  constructor() {
    super()
@@ -28,6 +29,7 @@ class UIDropdown extends HTMLElement {
  }

  toggle() {
+    if (this.isClosing) return
    this.isOpen = !this.isOpen
    if (this.contentEl) {
      if (this.isOpen) {
@@ -39,10 +41,15 @@ class UIDropdown extends HTMLElement {
  }

  close() {
+    if (this.isClosing) return
+    this.isClosing = true
    this.isOpen = false
    if (this.contentEl) {
      this.contentEl.classList.add('hidden')
    }
+    setTimeout(() => {
+      this.isClosing = false
+    }, 100)
  }

  handleClickOutside(event: MouseEvent) {
--- a/static/style.css
+++ b/static/style.css
@@ -95,7 +95,11 @@ html, body {
  .scrollbar-hide::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }
-  .scrollbar-hide {
+button.in-watchlist .watchlist-icon {
+  fill: currentColor !important;
+}
+
+.scrollbar-hide {
    -ms-overflow-style: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.05);
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -26,6 +26,47 @@
        document.getElementById('mobile-overlay').classList.add('hidden');
      }
    }
+
+    const watchlistIds = new Set()
+
+    function initWatchlist(ids) {
+      ids.forEach(id => watchlistIds.add(id))
+    }
+
+    function toggleWatchlist(id, btn) {
+      const isInWatchlist = watchlistIds.has(id)
+      const url = isInWatchlist ? `/api/watchlist/${id}` : '/api/watchlist'
+      const method = isInWatchlist ? 'DELETE' : 'POST'
+      const body = isInWatchlist ? null : JSON.stringify({ animeId: id, status: 'plan_to_watch' })
+      fetch(url, {
+        method,
+        headers: body ? { 'Content-Type': 'application/json' } : {},
+        body
+      }).then(res => {
+        if (res.ok) {
+          if (isInWatchlist) {
+            watchlistIds.delete(id)
+            btn.classList.remove('in-watchlist')
+            btn.setAttribute('aria-label', 'Add to Watchlist')
+          } else {
+            watchlistIds.add(id)
+            btn.classList.add('in-watchlist')
+            btn.setAttribute('aria-label', 'Remove from Watchlist')
+          }
+        }
+      })
+    }
+
+    function removeFromWatchlist(id, btn) {
+      fetch(`/api/watchlist/${id}`, { method: 'DELETE' }).then(res => {
+        if (res.ok) {
+          watchlistIds.delete(id)
+          const card = btn.closest('.group').parentElement
+          if (card) card.remove()
+          setTimeout(() => location.reload(), 100)
+        }
+      })
+    }
  </script>
 </head>
 <body class="bg-background text-neutral-200">
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -1,5 +1,6 @@
 {{define "title"}}Browse{{end}}
 {{define "content"}}
+{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
 <div class="flex flex-col gap-6">
  <div class="flex items-end justify-between">
    <h1 class="text-lg font-normal text-neutral-300">Browse</h1>
@@ -16,7 +17,7 @@
    {{else}}
      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">
        {{range .Animes}}
-          {{template "anime_card" dict "Anime" . "WithActions" true}}
+          {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
        {{end}}
      </div>
    {{end}}
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -24,14 +24,6 @@

    {{if $withActions}}
      <div class="absolute inset-0 z-10 flex flex-col p-3 {{if $hasTopBadge}}pt-10{{end}} opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-        {{if $isWatchlist}}
-          <div class="flex justify-end">
-            <button class="text-white/70 transition-colors hover:text-white focus:outline-none disabled:opacity-50" aria-label="Remove from Watchlist">
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-            </button>
-          </div>
-        {{end}}
-
        {{if not $isWatchlist}}
          <h3 class="mb-1.5 line-clamp-2 text-sm font-medium text-white shadow-black drop-shadow-md">
            {{$displayTitle}}
@@ -44,13 +36,11 @@
          </p>
        {{end}}

-        {{if not $isWatchlist}}
-          <div class="mt-auto flex items-center justify-start pb-2 pl-2">
-            <button class="text-accent hover:text-accent/80 transition-colors focus:outline-none disabled:opacity-50" aria-label="Add to Watchlist">
-              <svg class="size-6 shadow-black drop-shadow-md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
-            </button>
-          </div>
-        {{end}}
+        <div class="mt-auto flex items-center justify-start pb-2 pl-2">
+          <button type="button" onclick="event.preventDefault(); event.stopPropagation(); toggleWatchlist({{$anime.MalID}}, this)" class="text-accent hover:text-accent/80 transition-colors focus:outline-none {{if $isWatchlist}}in-watchlist{{end}}" aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}">
+            <svg class="size-6 shadow-black drop-shadow-md watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
+          </button>
+        </div>
      </div>
    {{else}}
      <div class="absolute bottom-0 left-0 z-10 w-full p-4">
@@ -62,22 +52,22 @@
            {{if $anime.Score}}
              <span class="flex items-center gap-1">
                <svg class="text-accent h-3 w-3" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
-                {{$anime.Score}}
-              </span>
-            {{end}}
-            {{if $anime.Year}}
-              <span>•</span>
-              <span>{{$anime.Year}}</span>
-            {{end}}
-            {{if $anime.Episodes}}
-              <span>•</span>
-              <span>{{$anime.Episodes}} ep</span>
-            {{end}}
-          </div>
-        {{end}}
-      </div>
-    {{end}}
-  </a>
+                  {{$anime.Score}}
+                </span>
+              {{end}}
+              {{if $anime.Year}}
+                <span>•</span>
+                <span>{{$anime.Year}}</span>
+              {{end}}
+              {{if $anime.Episodes}}
+                <span>•</span>
+                <span>{{$anime.Episodes}} ep</span>
+              {{end}}
+            </div>
+          {{end}}
+        </div>
+      {{end}}
+    </a>
  {{if and $withActions (not $hideTitle)}}
    <h3 class="line-clamp-2 text-sm font-medium text-white">
      {{$displayTitle}}
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -6,7 +6,7 @@
 <div class="mb-4 flex gap-2">
  <ui-dropdown class="relative block" data-align="left" data-width="min-w-[160px]">
    <div data-trigger class="cursor-pointer">
-      <button class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-white transition-colors disabled:opacity-50">
+      <button type="button" class="bg-background-button hover:bg-background-button-hover flex items-center justify-between gap-3 px-4 py-2.5 text-sm font-medium text-white transition-colors disabled:opacity-50">
        <span id="watchlist-status-display-{{$anime.MalID}}">
          {{if $status}}
            {{if eq $status "watching"}}Watching{{end}}
@@ -23,16 +23,16 @@

    <div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-2xl left-0 top-full mt-2">
      <div class="flex flex-col py-1">
-        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching')">
+        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
          <span class="font-medium text-sm text-white">Watching</span>
        </button>
-        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed')">
+        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
          <span class="font-medium text-sm text-white">Completed</span>
        </button>
-        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan to watch', 'Plan to Watch')">
+        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
          <span class="font-medium text-sm text-white">Plan to Watch</span>
        </button>
-        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped')">
+        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-white/10 focus:bg-white/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
          <span class="font-medium text-sm text-white">Dropped</span>
        </button>
        
@@ -52,15 +52,22 @@
 </div>

 <script>
-  function updateWatchlist(id, status, display) {
+  function updateWatchlist(id, status, display, btn) {
    fetch('/api/watchlist', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ animeId: id, status: status })
    }).then(res => {
      if (res.ok) {
+        watchlistIds.add(id);
        document.getElementById('watchlist-status-display-' + id).textContent = display;
        document.getElementById('remove-watchlist-container-' + id).classList.remove('hidden');
+        
+        // Close dropdown after a small delay to let click event finish
+        requestAnimationFrame(() => {
+          const dropdown = btn.closest('ui-dropdown');
+          if (dropdown) dropdown.close();
+        });
      }
    });
  }
@@ -68,8 +75,16 @@
  function removeWatchlist(id) {
    fetch('/api/watchlist/' + id, { method: 'DELETE' }).then(res => {
      if (res.ok) {
+        watchlistIds.delete(id);
        document.getElementById('watchlist-status-display-' + id).textContent = 'Add to Watchlist';
        document.getElementById('remove-watchlist-container-' + id).classList.add('hidden');
+        
+        // Close dropdown
+        const btn = document.getElementById('watchlist-status-display-' + id);
+        if (btn) {
+          const dropdown = btn.closest('ui-dropdown');
+          if (dropdown) dropdown.close();
+        }
      }
    });
  }
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -1,5 +1,6 @@
 {{define "title"}}Home{{end}}
 {{define "content"}}
+{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
 <div class="flex flex-col gap-10">
  {{if .ContinueWatching}}
    {{template "continue_watching" .ContinueWatching}}
@@ -16,7 +17,7 @@

    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
      {{range .CurrentlyAiring}}
-        {{template "anime_card" dict "Anime" . "WithActions" true}}
+        {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
      {{end}}
    </div>
  </section>
@@ -32,7 +33,7 @@

    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
      {{range .MostPopular}}
-        {{template "anime_card" dict "Anime" . "WithActions" true}}
+        {{template "anime_card" dict "Anime" . "WithActions" true "IsWatchlist" (index $.WatchlistMap .MalID)}}
      {{end}}
    </div>
  </section>
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -0,0 +1,45 @@
+{{define "title"}}Watchlist{{end}}
+{{define "content"}}
+<div id="watchlist-content" class="flex flex-col gap-10">
+  {{range $status := $.StatusOrder}}
+    {{$entries := index $.WatchlistByStatus $status}}
+    {{if $entries}}
+      <section class="w-full">
+        <div class="mb-4 flex items-end justify-between">
+          <h2 class="text-lg font-normal text-neutral-300">{{index $.StatusLabels $status}}</h2>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
+          {{range $entries}}
+            <div class="watchlist-item flex w-full flex-col gap-2">
+              <div class="group relative flex aspect-[2/3] w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
+                <a href="/anime/{{.AnimeID}}" class="absolute inset-0"></a>
+                <img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
+
+                <div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                  <div class="flex justify-end">
+                    <button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="#watchlist-content" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none" aria-label="Remove from Watchlist">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <h3 class="line-clamp-2 text-sm font-medium text-white">
+                {{.DisplayTitle}}
+              </h3>
+            </div>
+          {{end}}
+        </div>
+      </section>
+    {{end}}
+  {{end}}
+
+  {{if eq (len $.AllEntries) 0}}
+    <div class="flex flex-col items-center justify-center gap-2 py-24 text-neutral-400">
+      <svg class="h-12 w-12 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+      <p class="text-lg">Your watchlist is empty.</p>
+      <a href="/" class="text-accent hover:text-accent/80 transition-colors">Browse anime</a>
+    </div>
+  {{end}}
+</div>
+{{end}}
--- a/templates/watchlist_partial.gohtml
+++ b/templates/watchlist_partial.gohtml
@@ -0,0 +1,45 @@
+{{define "title"}}Watchlist{{end}}
+{{define "content"}}
+<div id="watchlist-content" class="flex flex-col gap-10">
+  {{range $status := $.StatusOrder}}
+    {{$entries := index $.WatchlistByStatus $status}}
+    {{if $entries}}
+      <section class="w-full">
+        <div class="mb-4 flex items-end justify-between">
+          <h2 class="text-lg font-normal text-neutral-300">{{index $.StatusLabels $status}}</h2>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
+          {{range $entries}}
+            <div class="watchlist-item flex w-full flex-col gap-2">
+              <div class="group relative flex aspect-[2/3] w-full flex-col overflow-hidden bg-white/5 after:absolute after:inset-0 after:bg-black/80 after:opacity-0 hover:after:opacity-100 after:transition-opacity">
+                <a href="/anime/{{.AnimeID}}" class="absolute inset-0"></a>
+                <img src="{{.ImageUrl}}" alt="{{.DisplayTitle}}" class="h-full w-full object-cover" loading="lazy" />
+
+                <div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                  <div class="flex justify-end">
+                    <button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="#watchlist-content" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none" aria-label="Remove from Watchlist">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <h3 class="line-clamp-2 text-sm font-medium text-white">
+                {{.DisplayTitle}}
+              </h3>
+            </div>
+          {{end}}
+        </div>
+      </section>
+    {{end}}
+  {{end}}
+
+  {{if eq (len $.AllEntries) 0}}
+    <div class="flex flex-col items-center justify-center gap-2 py-24 text-neutral-400">
+      <svg class="h-12 w-12 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
+      <p class="text-lg">Your watchlist is empty.</p>
+      <a href="/" class="text-accent hover:text-accent/80 transition-colors">Browse anime</a>
+    </div>
+  {{end}}
+</div>
+{{end}}