feat: sync watchlist state across quick add and dropdown

templates/components/anime_card.gohtml

@@ -37,7 +37,7 @@
         {{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}}">
+          <button type="button" data-mal-id="{{$anime.MalID}}" 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>

templates/components/watch_order.gohtml

@@ -4,7 +4,7 @@
   <div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6">
     {{range .Relations}}
       <div class="group relative">
-        {{template "anime_card" dict "Anime" .Anime "WithActions" true "Compact" true "HasTopBadge" true}}
+        {{template "anime_card" dict "Anime" .Anime "WithActions" true "Compact" true "HasTopBadge" true "IsWatchlist" (index $.WatchlistMap .Anime.MalID)}}
         {{if eq .Anime.MalID $.AnimeID}}
           <div class="bg-accent absolute -top-2 -right-2 z-20 px-2 py-0.5 text-[10px] font-bold text-white shadow-md">
             CURRENT

templates/components/watchlist_actions.gohtml

@@ -11,7 +11,7 @@
           {{if $status}}
             {{if eq $status "watching"}}Watching{{end}}
             {{if eq $status "completed"}}Completed{{end}}
-            {{if eq $status "plan to watch"}}Plan to Watch{{end}}
+            {{if eq $status "plan_to_watch"}}Plan to Watch{{end}}
             {{if eq $status "dropped"}}Dropped{{end}}
           {{else}}
             Add to Watchlist
@@ -63,6 +63,17 @@
         document.getElementById('watchlist-status-display-' + id).textContent = display;
         document.getElementById('remove-watchlist-container-' + id).classList.remove('hidden');
         
+        // Update all watchlist icons on the page
+        document.querySelectorAll('.watchlist-icon').forEach(function(icon) {
+          const button = icon.closest('button')
+          if (button) {
+            const malId = button.dataset.malId
+            if (malId && parseInt(malId) === id) {
+              button.classList.add('in-watchlist')
+            }
+          }
+        });
+        
         // Close dropdown after a small delay to let click event finish
         requestAnimationFrame(() => {
           const dropdown = btn.closest('ui-dropdown');
@@ -79,6 +90,17 @@
         document.getElementById('watchlist-status-display-' + id).textContent = 'Add to Watchlist';
         document.getElementById('remove-watchlist-container-' + id).classList.add('hidden');
         
+        // Update all watchlist icons on the page
+        document.querySelectorAll('.watchlist-icon').forEach(function(icon) {
+          const button = icon.closest('button')
+          if (button) {
+            const malId = button.dataset.malId
+            if (malId && parseInt(malId) === id) {
+              button.classList.remove('in-watchlist')
+            }
+          }
+        });
+        
         // Close dropdown
         const btn = document.getElementById('watchlist-status-display-' + id);
         if (btn) {