fix: clean up completion flow and watch page dropdown

static/player/episodes/complete.ts

@@ -1,11 +1,5 @@
-import DOMPurify from 'dompurify';
 import { state } from '../state';
 
-/**
- * Marks anime as completed when final episode finishes.
- * Calls completion API, updates dropdown UI, adds to watchlist.
- * Retries up to 2 times on failure.
- */
 export const completeAnime = async (episodeNumber: number): Promise<void> => {
   if (state.completionSent || !state.malID || !episodeNumber) return;
   state.completionSent = true;
@@ -20,7 +14,6 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
 
     if (!res.ok) {
       state.completionSent = false;
-      // retry
       if (state.completionAttempts < 2) {
         state.completionAttempts++;
         setTimeout(() => completeAnime(episodeNumber), 1000);
@@ -28,7 +21,6 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
       return;
     }
 
-    // update dropdown trigger text
     const trigger = document.querySelector('[data-dropdown-trigger]') as HTMLButtonElement | null;
     if (trigger) {
       trigger.textContent = 'Completed ';
@@ -37,37 +29,6 @@ export const completeAnime = async (episodeNumber: number): Promise<void> => {
       caret.textContent = '▾';
       trigger.appendChild(caret);
     }
-
-    // add to watchlist with 'completed' status
-    const dropdown = document.getElementById('watch-status-dropdown');
-    if (dropdown) {
-      const payload = {
-        anime_id: String(state.malID),
-        anime_title: state.container.dataset.animeTitle ?? '',
-        anime_title_english: state.container.dataset.animeTitleEnglish ?? '',
-        anime_title_japanese: state.container.dataset.animeTitleJapanese ?? '',
-        anime_image: state.container.dataset.animeImage ?? '',
-        status: 'completed',
-        airing: state.container.dataset.animeAiring === 'true',
-      };
-
-      fetch('/api/watchlist', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'HX-Request': 'true' },
-        body: `anime_id=${encodeURIComponent(payload.anime_id)}&anime_title=${encodeURIComponent(payload.anime_title)}&anime_title_english=${encodeURIComponent(payload.anime_title_english)}&anime_title_japanese=${encodeURIComponent(payload.anime_title_japanese)}&anime_image=${encodeURIComponent(payload.anime_image)}&status=${encodeURIComponent(payload.status)}&airing=${encodeURIComponent(String(payload.airing))}`,
-        credentials: 'same-origin',
-      })
-        .then(async res => {
-          if (!res.ok) return;
-          // replace dropdown with HTMX response
-          const html = await res.text();
-          const wrapper = document.createElement('span');
-          wrapper.id = 'watch-status-dropdown';
-          wrapper.innerHTML = DOMPurify.sanitize(html);
-          dropdown.replaceWith(wrapper);
-        })
-        .catch(() => {});
-    }
   } catch {
     state.completionSent = false;
     if (state.completionAttempts < 2) {

templates/watch.gohtml

@@ -24,7 +24,6 @@
           </button>
         </div>
         <div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-2xl right-0 top-full mt-2">
-          {{if .WatchlistStatus}}
           <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-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
               <span class="text-sm text-foreground">Watching</span>
@@ -38,27 +37,13 @@
             <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
               <span class="text-sm text-foreground">Dropped</span>
             </button>
-            <div class="border-t border-border my-1"></div>
+            <div id="remove-watchlist-container-{{$anime.MalID}}" class="hidden">
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
+              <div class="border-t border-border my-1"></div>
-              <span class="text-sm text-red-400 whitespace-nowrap">Remove from Watchlist</span>
+              <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
-            </button>
+                <span class="text-sm text-red-400 whitespace-nowrap">Remove from Watchlist</span>
+              </button>
+            </div>
           </div>
-          {{else}}
-          <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-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', this)">
-              <span class="text-sm text-foreground">Watching</span>
-            </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', this)">
-              <span class="text-sm text-foreground">Completed</span>
-            </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', this)">
-              <span class="text-sm text-foreground">Plan to Watch</span>
-            </button>
-            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
-              <span class="text-sm text-foreground">Dropped</span>
-            </button>
-          </div>
-          {{end}}
         </div>
       </ui-dropdown>
     </div>
@@ -180,6 +165,12 @@
 {{end}}
 
 <script>
+  document.addEventListener('DOMContentLoaded', function() {
+    if (watchlistIds.has({{$anime.MalID}})) {
+      document.getElementById('remove-watchlist-container-{{$anime.MalID}}').classList.remove('hidden');
+    }
+  });
+
   function updateWatchlist(id, status, display, btn) {
     fetch('/api/watchlist', {
       method: 'POST',
@@ -189,6 +180,7 @@
       if (res.ok) {
         watchlistIds.add(id);
         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) {
@@ -215,6 +207,7 @@
       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');
         if (window.showToast) showToast({ message: 'Removed from watchlist' });
         
         // Update all watchlist icons on the page
@@ -236,8 +229,6 @@
       }
     });
   }
-
-
 </script>
   </div>
 </div>