From 6932d4b8d00ec54ec7c2e4cfd48accb397a7e0e9 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 25 May 2026 01:16:02 +0200
Subject: [PATCH] refactor: extract inline JS to modules

---
 static/htmx.ts                                |  71 ++++
 static/shell.ts                               |  94 +++++
 static/watchlist.ts                           | 326 ++++++++++++++++++
 templates/anime.gohtml                        |   2 +-
 templates/base.gohtml                         | 210 +----------
 templates/browse.gohtml                       |   2 +-
 templates/components/anime_card.gohtml        |   9 +-
 templates/components/continue_watching.gohtml |   4 +-
 templates/components/watchlist_actions.gohtml |  47 ++-
 templates/watch.gohtml                        |  42 ++-
 templates/watchlist.gohtml                    |  12 +-
 templates/watchlist_partial.gohtml            |   9 +-
 12 files changed, 608 insertions(+), 220 deletions(-)
 create mode 100644 static/htmx.ts
 create mode 100644 static/shell.ts
 create mode 100644 static/watchlist.ts

diff --git a/static/htmx.ts b/static/htmx.ts
new file mode 100644
index 0000000..271462a
--- /dev/null
+++ b/static/htmx.ts
@@ -0,0 +1,71 @@
+export {};
+
+type ToastFn = (opts: { message: string; duration?: number }) => void;
+
+const getToast = (): ToastFn | null => {
+  const anyWindow = window as unknown as { showToast?: ToastFn };
+  return typeof anyWindow.showToast === 'function' ? anyWindow.showToast : null;
+};
+
+const toast = (message: string): void => {
+  getToast()?.({ message });
+};
+
+const setBusy = (el: Element | null, busy: boolean): void => {
+  if (!(el instanceof HTMLElement)) return;
+  el.toggleAttribute('aria-busy', busy);
+  el.dataset.htmxLoading = busy ? 'true' : 'false';
+
+  if (el instanceof HTMLButtonElement) {
+    el.disabled = busy;
+  }
+
+  if (busy) {
+    el.dataset.htmxBusy = 'true';
+    return;
+  }
+
+  delete el.dataset.htmxBusy;
+};
+
+const getTriggerFromHtmxEvent = (event: Event): Element | null => {
+  const detail = event as unknown as { detail?: { elt?: Element } };
+  return detail.detail?.elt ?? null;
+};
+
+const onReady = (fn: () => void): void => {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+    return;
+  }
+
+  fn();
+};
+
+onReady(() => {
+  document.addEventListener('htmx:beforeRequest', event => {
+    setBusy(getTriggerFromHtmxEvent(event), true);
+  });
+
+  document.addEventListener('htmx:afterRequest', event => {
+    setBusy(getTriggerFromHtmxEvent(event), false);
+
+    const remaining = document.querySelectorAll('.continue-watching-item').length;
+    if (remaining !== 0) return;
+
+    const section = document.getElementById('continue-watching-section');
+    section?.remove();
+  });
+
+  document.addEventListener('htmx:responseError', () => {
+    toast('Something went wrong');
+  });
+
+  document.addEventListener('htmx:sendError', () => {
+    toast('Network error');
+  });
+
+  document.addEventListener('htmx:timeout', () => {
+    toast('Request timed out');
+  });
+});
diff --git a/static/shell.ts b/static/shell.ts
new file mode 100644
index 0000000..1b66d9a
--- /dev/null
+++ b/static/shell.ts
@@ -0,0 +1,94 @@
+export {};
+
+const onReady = (fn: () => void): void => {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+    return;
+  }
+
+  fn();
+};
+
+const isMobileViewport = (): boolean => window.matchMedia('(max-width: 1023px)').matches;
+
+const initSidebarTransitions = (): void => {
+  requestAnimationFrame(() => {
+    document.documentElement.classList.add('sidebar-ready');
+  });
+};
+
+const initMobileMenu = (): void => {
+  const menu = document.getElementById('mobile-menu');
+  const backdrop = document.getElementById('mobile-menu-backdrop');
+  const toggle = document.querySelector('[data-mobile-menu-toggle]');
+
+  if (!(menu instanceof HTMLElement)) return;
+  if (!(backdrop instanceof HTMLElement)) return;
+  if (!(toggle instanceof HTMLElement)) return;
+
+  const body = document.body;
+  let lastFocused: HTMLElement | null = null;
+
+  const setOpen = (nextOpen: boolean): void => {
+    menu.dataset.mobileOpen = nextOpen ? 'true' : 'false';
+    backdrop.dataset.mobileOpen = nextOpen ? 'true' : 'false';
+    backdrop.classList.toggle('hidden', !nextOpen);
+    toggle.setAttribute('aria-expanded', nextOpen ? 'true' : 'false');
+    body.classList.toggle('overflow-hidden', nextOpen);
+  };
+
+  const openMenu = (): void => {
+    if (!isMobileViewport()) return;
+    if (menu.dataset.mobileOpen === 'true') return;
+
+    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    setOpen(true);
+
+    const focusTarget = menu.querySelector<HTMLElement>(
+      'a, button, input, [tabindex]:not([tabindex="-1"])'
+    );
+    focusTarget?.focus();
+  };
+
+  const closeMenu = (): void => {
+    if (menu.dataset.mobileOpen !== 'true') return;
+    setOpen(false);
+    lastFocused?.focus();
+  };
+
+  toggle.addEventListener('click', () => {
+    if (menu.dataset.mobileOpen === 'true') {
+      closeMenu();
+      return;
+    }
+
+    openMenu();
+  });
+
+  backdrop.addEventListener('click', closeMenu);
+
+  document.addEventListener('keydown', event => {
+    if (event.key !== 'Escape') return;
+    if (menu.dataset.mobileOpen !== 'true') return;
+    event.preventDefault();
+    closeMenu();
+  });
+
+  menu.querySelectorAll<HTMLElement>('a, button').forEach(el => {
+    el.addEventListener('click', () => {
+      if (!isMobileViewport()) return;
+      closeMenu();
+    });
+  });
+
+  window.addEventListener('resize', () => {
+    if (!isMobileViewport()) {
+      setOpen(false);
+    }
+  });
+};
+
+onReady(() => {
+  initSidebarTransitions();
+  initMobileMenu();
+});
diff --git a/static/watchlist.ts b/static/watchlist.ts
new file mode 100644
index 0000000..e0951b9
--- /dev/null
+++ b/static/watchlist.ts
@@ -0,0 +1,326 @@
+export {};
+
+type WatchlistStatus = 'watching' | 'completed' | 'plan_to_watch' | 'dropped';
+
+type WatchlistUpdateDisplay =
+  | 'Watching'
+  | 'Completed'
+  | 'Plan to Watch'
+  | 'Dropped'
+  | 'Add to Watchlist';
+
+const watchlistIds = new Set<number>();
+const inflight = new Set<number>();
+
+const getShowToast = (): ((opts: { message: string; duration?: number }) => void) | null => {
+  const anyWindow = window as unknown as {
+    showToast?: (opts: { message: string; duration?: number }) => void;
+  };
+  return typeof anyWindow.showToast === 'function' ? anyWindow.showToast : null;
+};
+
+const toast = (message: string): void => {
+  getShowToast()?.({ message });
+};
+
+const toInt = (value: string | undefined): number | null => {
+  if (!value) return null;
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const withTimeout = async <T>(promise: Promise<T>, ms: number): Promise<T> => {
+  let timeoutId: number | undefined;
+  const timeout = new Promise<never>((_, reject) => {
+    timeoutId = window.setTimeout(() => reject(new Error('timeout')), ms);
+  });
+
+  try {
+    return await Promise.race([promise, timeout]);
+  } finally {
+    if (typeof timeoutId === 'number') {
+      window.clearTimeout(timeoutId);
+    }
+  }
+};
+
+const requestJson = async (input: string, init: RequestInit): Promise<Response> =>
+  withTimeout(fetch(input, init), 12_000);
+
+const syncRemoveButtonVisibility = (id: number): void => {
+  const container = document.getElementById(`remove-watchlist-container-${id}`);
+  if (!container) return;
+  container.classList.toggle('hidden', !watchlistIds.has(id));
+};
+
+const syncWatchlistDropdown = (id: number, inWatchlist: boolean): void => {
+  const statusDisplay = document.getElementById(`watchlist-status-display-${id}`);
+  if (!statusDisplay) return;
+  statusDisplay.textContent = inWatchlist ? 'Plan to Watch' : 'Add to Watchlist';
+  syncRemoveButtonVisibility(id);
+};
+
+const syncIconsForId = (id: number): void => {
+  const shouldBeInWatchlist = watchlistIds.has(id);
+  document.querySelectorAll<HTMLElement>('[data-watchlist-toggle][data-mal-id]').forEach(button => {
+    const malId = toInt(button.dataset.malId);
+    if (malId !== id) return;
+    button.classList.toggle('in-watchlist', shouldBeInWatchlist);
+    button.setAttribute(
+      'aria-label',
+      shouldBeInWatchlist ? 'Remove from Watchlist' : 'Add to Watchlist'
+    );
+    button.toggleAttribute('aria-busy', inflight.has(id));
+  });
+};
+
+const setBusy = (id: number, busy: boolean): void => {
+  if (busy) {
+    inflight.add(id);
+  } else {
+    inflight.delete(id);
+  }
+
+  document
+    .querySelectorAll<HTMLButtonElement>('[data-watchlist-toggle][data-mal-id]')
+    .forEach(button => {
+      const malId = toInt(button.dataset.malId);
+      if (malId !== id) return;
+      button.disabled = busy;
+      button.toggleAttribute('aria-busy', busy);
+    });
+
+  document
+    .querySelectorAll<HTMLButtonElement>(
+      '[data-watchlist-update][data-mal-id], [data-watchlist-remove][data-mal-id]'
+    )
+    .forEach(button => {
+      const malId = toInt(button.dataset.malId);
+      if (malId !== id) return;
+      button.disabled = busy;
+      button.toggleAttribute('aria-busy', busy);
+    });
+};
+
+const closeClosestDropdown = (from: HTMLElement): void => {
+  requestAnimationFrame(() => {
+    const dropdown = from.closest('ui-dropdown') as { close?: () => void } | null;
+    dropdown?.close?.();
+  });
+};
+
+const toggleWatchlist = async (id: number, title: string): Promise<void> => {
+  if (inflight.has(id)) return;
+  const isInWatchlist = watchlistIds.has(id);
+
+  setBusy(id, true);
+
+  const optimisticNext = !isInWatchlist;
+  if (optimisticNext) {
+    watchlistIds.add(id);
+  } else {
+    watchlistIds.delete(id);
+  }
+  syncIconsForId(id);
+  syncWatchlistDropdown(id, optimisticNext);
+
+  const url = isInWatchlist ? `/api/watchlist/${id}` : '/api/watchlist';
+  const method: 'DELETE' | 'POST' = isInWatchlist ? 'DELETE' : 'POST';
+  const body = isInWatchlist
+    ? null
+    : JSON.stringify({ animeId: id, status: 'plan_to_watch' satisfies WatchlistStatus });
+
+  try {
+    const response = await requestJson(url, {
+      method,
+      headers: body ? { 'Content-Type': 'application/json' } : {},
+      body: body ?? undefined,
+    });
+
+    if (!response.ok) {
+      throw new Error('not ok');
+    }
+
+    toast(optimisticNext ? `Added ${title} to watchlist` : `Removed ${title} from watchlist`);
+  } catch {
+    if (optimisticNext) {
+      watchlistIds.delete(id);
+    } else {
+      watchlistIds.add(id);
+    }
+    syncIconsForId(id);
+    syncWatchlistDropdown(id, watchlistIds.has(id));
+    toast('Failed to update watchlist');
+  } finally {
+    setBusy(id, false);
+    syncIconsForId(id);
+    syncRemoveButtonVisibility(id);
+  }
+};
+
+const updateWatchlist = async (
+  id: number,
+  status: WatchlistStatus,
+  display: WatchlistUpdateDisplay,
+  title: string,
+  source: HTMLElement
+): Promise<void> => {
+  if (inflight.has(id)) return;
+  setBusy(id, true);
+
+  const wasInWatchlist = watchlistIds.has(id);
+  watchlistIds.add(id);
+  syncIconsForId(id);
+  syncRemoveButtonVisibility(id);
+
+  try {
+    const response = await requestJson('/api/watchlist', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ animeId: id, status }),
+    });
+
+    if (!response.ok) {
+      throw new Error('not ok');
+    }
+
+    const statusDisplay = document.getElementById(`watchlist-status-display-${id}`);
+    if (statusDisplay) {
+      statusDisplay.textContent = display;
+    }
+
+    closeClosestDropdown(source);
+    toast(`Marked ${title} as ${display}`);
+  } catch {
+    if (!wasInWatchlist) {
+      watchlistIds.delete(id);
+    }
+    syncIconsForId(id);
+    syncRemoveButtonVisibility(id);
+    toast('Failed to update watchlist');
+  } finally {
+    setBusy(id, false);
+  }
+};
+
+const removeWatchlist = async (id: number, title: string, source: HTMLElement): Promise<void> => {
+  if (inflight.has(id)) return;
+  setBusy(id, true);
+
+  const wasInWatchlist = watchlistIds.has(id);
+  watchlistIds.delete(id);
+  syncIconsForId(id);
+  syncWatchlistDropdown(id, false);
+
+  try {
+    const response = await requestJson(`/api/watchlist/${id}`, { method: 'DELETE' });
+    if (!response.ok) {
+      throw new Error('not ok');
+    }
+
+    closeClosestDropdown(source);
+    toast(`Removed ${title} from watchlist`);
+
+    const card = source.closest('.watchlist-item');
+    if (card instanceof HTMLElement) {
+      card.remove();
+      const remaining = document.querySelectorAll('.watchlist-item').length;
+      if (remaining === 0) {
+        window.setTimeout(() => window.location.reload(), 50);
+      }
+    }
+  } catch {
+    if (wasInWatchlist) {
+      watchlistIds.add(id);
+    }
+    syncIconsForId(id);
+    syncWatchlistDropdown(id, watchlistIds.has(id));
+    toast('Failed to update watchlist');
+  } finally {
+    setBusy(id, false);
+    syncRemoveButtonVisibility(id);
+  }
+};
+
+const initWatchlist = (ids: number[]): void => {
+  ids.forEach(id => watchlistIds.add(id));
+  ids.forEach(id => {
+    syncRemoveButtonVisibility(id);
+    syncIconsForId(id);
+  });
+};
+
+const onReady = (fn: () => void): void => {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+    return;
+  }
+
+  fn();
+};
+
+const installDelegatedHandlers = (): void => {
+  document.addEventListener('click', event => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+
+    const toggleButton = target.closest('[data-watchlist-toggle]') as HTMLElement | null;
+    if (toggleButton) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      const id = toInt(toggleButton.getAttribute('data-mal-id') ?? undefined);
+      if (id === null) return;
+      const title = toggleButton.getAttribute('data-watchlist-title') ?? 'anime';
+      void toggleWatchlist(id, title);
+      return;
+    }
+
+    const updateButton = target.closest('[data-watchlist-update]') as HTMLElement | null;
+    if (updateButton) {
+      event.preventDefault();
+      event.stopPropagation();
+      const id = toInt(updateButton.getAttribute('data-mal-id') ?? undefined);
+      if (id === null) return;
+      const status = updateButton.getAttribute('data-watchlist-status') as WatchlistStatus | null;
+      const display = updateButton.getAttribute(
+        'data-watchlist-display'
+      ) as WatchlistUpdateDisplay | null;
+      const title = updateButton.getAttribute('data-watchlist-title') ?? 'anime';
+      if (!status || !display) return;
+      void updateWatchlist(id, status, display, title, updateButton);
+      return;
+    }
+
+    const removeButton = target.closest('[data-watchlist-remove]') as HTMLElement | null;
+    if (removeButton) {
+      event.preventDefault();
+      event.stopPropagation();
+      const id = toInt(removeButton.getAttribute('data-mal-id') ?? undefined);
+      if (id === null) return;
+      const title = removeButton.getAttribute('data-watchlist-title') ?? 'anime';
+      void removeWatchlist(id, title, removeButton);
+    }
+  });
+};
+
+declare global {
+  interface Window {
+    initWatchlist: (ids: number[]) => void;
+    __WATCHLIST_IDS__?: unknown;
+  }
+}
+
+window.initWatchlist = initWatchlist;
+
+onReady(() => {
+  const raw = window.__WATCHLIST_IDS__;
+  if (Array.isArray(raw)) {
+    const ids: number[] = raw.filter((entry): entry is number => typeof entry === 'number');
+    if (ids.length > 0) {
+      initWatchlist(ids);
+    }
+  }
+
+  installDelegatedHandlers();
+});
diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 7fa3a34..c62ff1f 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -92,7 +92,7 @@
 
 {{define "title"}}{{.Anime.DisplayTitle}}{{end}}
 {{define "content"}}
-{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
+{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
 {{$anime := .Anime}}
 
 <div class="flex w-full flex-col gap-10 lg:pr-80">
diff --git a/templates/base.gohtml b/templates/base.gohtml
index d1d6e49..15b914f 100644
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -53,6 +53,11 @@
     html[data-theme="dark"] .theme-icon-light { display: block; }
     html[data-theme="light"] .theme-icon-light { display: none; }
    html[data-theme="light"] .theme-icon-dark { display: block; }
+
+    [data-htmx-loading="true"] {
+      opacity: 0.65;
+      pointer-events: none;
+    }
   </style>
    <script type="module" src="/dist/static/theme.js" defer></script>
    <template id="toast-template">
@@ -76,6 +81,9 @@
    <script type="module" src="/dist/static/sort_filter.js" defer></script>
    <script type="module" src="/dist/static/dedupe.js" defer></script>
    <script type="module" src="/dist/static/toast.js" defer></script>
+   <script type="module" src="/dist/static/shell.js" defer></script>
+   <script type="module" src="/dist/static/watchlist.js" defer></script>
+   <script type="module" src="/dist/static/htmx.js" defer></script>
   <script src="https://unpkg.com/htmx.org@1.9.12"></script>
   <script>
     document.addEventListener('htmx:afterSwap', function(evt) {
@@ -87,208 +95,6 @@
       if (window.showToast) showToast({ message: 'Something went wrong' });
     });
   </script>
-  <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      const menu = document.getElementById('mobile-menu');
-      const backdrop = document.getElementById('mobile-menu-backdrop');
-      const toggle = document.querySelector('[data-mobile-menu-toggle]');
-
-      if (!menu || !backdrop || !toggle) return;
-
-      const openMenu = function() {
-        menu.dataset.mobileOpen = 'true';
-        backdrop.dataset.mobileOpen = 'true';
-        backdrop.classList.remove('hidden');
-        toggle.setAttribute('aria-expanded', 'true');
-      };
-
-      const closeMenu = function() {
-        menu.dataset.mobileOpen = 'false';
-        backdrop.dataset.mobileOpen = 'false';
-        backdrop.classList.add('hidden');
-        toggle.setAttribute('aria-expanded', 'false');
-      };
-
-      toggle.addEventListener('click', function() {
-        if (menu.dataset.mobileOpen === 'true') {
-          closeMenu();
-          return;
-        }
-
-        openMenu();
-      });
-
-      backdrop.addEventListener('click', closeMenu);
-
-      menu.querySelectorAll('a, button').forEach(function(el) {
-        el.addEventListener('click', function() {
-          if (window.innerWidth < 1024) closeMenu();
-        });
-      });
-    });
-
-    // Initialize sidebar state on load
-    document.addEventListener('DOMContentLoaded', () => {
-      // Small delay to ensure styles are applied before enabling transitions
-      requestAnimationFrame(() => {
-        document.documentElement.classList.add('sidebar-ready');
-      });
-    });
-
-    const watchlistIds = new Set()
-
-    function initWatchlist(ids) {
-      ids.forEach(id => watchlistIds.add(id));
-      const sync = () => ids.forEach(id => syncRemoveButtonVisibility(id));
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', sync);
-      } else {
-        sync();
-      }
-    }
-
-    function syncRemoveButtonVisibility(id) {
-      const container = document.getElementById('remove-watchlist-container-' + id);
-      if (container) {
-        container.classList.toggle('hidden', !watchlistIds.has(id));
-      }
-    }
-
-    function toggleWatchlist(id, title, btn) {
-      // determine action based on current watchlist state
-      const isInWatchlist = watchlistIds.has(id)
-      const url = isInWatchlist ? `/api/watchlist/${id}` : '/api/watchlist'
-      const method = isInWatchlist ? 'DELETE' : 'POST'
-      // add to watchlist with default status; remove doesn't need body
-      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')
-            if (window.showToast) showToast({ message: `Removed ${title} from watchlist` })
-            
-            // Update dropdown status if on anime page
-            syncWatchlistDropdown(id, false)
-          } else {
-            watchlistIds.add(id)
-            btn.classList.add('in-watchlist')
-            btn.setAttribute('aria-label', 'Remove from Watchlist')
-            if (window.showToast) showToast({ message: `Added ${title} to watchlist` })
-            
-            // Update dropdown status if on anime page
-            syncWatchlistDropdown(id, true)
-          }
-          
-          // Update all other watchlist icons on the page for this anime
-          document.querySelectorAll('.watchlist-icon').forEach(function(icon) {
-            const button = icon.closest('button')
-            if (button && button !== btn) {
-              const malId = button.dataset.malId
-              if (malId && parseInt(malId) === id) {
-                if (watchlistIds.has(id)) {
-                  button.classList.add('in-watchlist')
-                } else {
-                  button.classList.remove('in-watchlist')
-                }
-              }
-            }
-          })
-        } else {
-          if (window.showToast) showToast({ message: 'Failed to update watchlist' })
-        }
-      }).catch(() => {
-if (window.showToast) showToast({ message: 'Something went wrong' })
-      })
-    }
-
-    function syncWatchlistDropdown(id, inWatchlist) {
-      const statusDisplay = document.getElementById('watchlist-status-display-' + id)
-      if (statusDisplay) {
-        statusDisplay.textContent = inWatchlist ? 'Plan to Watch' : 'Add to Watchlist'
-        syncRemoveButtonVisibility(id)
-      }
-    }
-
-    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()
-          if (window.showToast) showToast({ message: 'Removed from watchlist' })
-          setTimeout(() => location.reload(), 100)
-        } else {
-          if (window.showToast) showToast({ message: 'Failed to update watchlist' })
-        }
-      })
-    }
-
-    function updateWatchlist(id, status, display, title, 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;
-          syncRemoveButtonVisibility(id);
-          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');
-              }
-            }
-          });
-          requestAnimationFrame(() => {
-            const dropdown = btn.closest('ui-dropdown');
-            if (dropdown) dropdown.close();
-          });
-          if (window.showToast) showToast({ message: `Marked ${title} as ${display}` });
-        } else {
-          if (window.showToast) showToast({ message: 'Failed to update watchlist' });
-        }
-      }).catch(() => {
-        if (window.showToast) showToast({ message: 'Something went wrong' });
-      });
-    }
-
-    function removeWatchlist(id, title, btn) {
-      fetch('/api/watchlist/' + id, { method: 'DELETE' }).then(res => {
-        if (res.ok) {
-          watchlistIds.delete(id);
-          document.getElementById('watchlist-status-display-' + id).textContent = 'Add to Watchlist';
-          syncRemoveButtonVisibility(id);
-          if (window.showToast) showToast({ message: `Removed ${title} from watchlist` });
-          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');
-              }
-            }
-          });
-          if (btn) {
-            const dropdown = btn.closest('ui-dropdown');
-            if (dropdown) dropdown.close();
-          }
-        } else {
-          if (window.showToast) showToast({ message: 'Failed to update watchlist' });
-        }
-      }).catch(() => {
-        if (window.showToast) showToast({ message: 'Something went wrong' });
-      });
-    }
-  </script>
 </head>
   <body class="bg-background text-foreground">
   <div class="flex min-h-screen flex-col">
diff --git a/templates/browse.gohtml b/templates/browse.gohtml
index 8965240..edf83aa 100644
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -1,6 +1,6 @@
 {{define "title"}}Browse{{end}}
 {{define "content"}}
-{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
+{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
 {{template "browse_content" .}}
 {{end}}
 
diff --git a/templates/components/anime_card.gohtml b/templates/components/anime_card.gohtml
index 5694e06..eecb164 100644
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -35,7 +35,14 @@
         {{end}}
 
         <div class="mt-auto flex items-center justify-start pb-2 pl-2">
-          <button type="button" data-mal-id="{{$anime.MalID}}" onclick="event.preventDefault(); event.stopPropagation(); toggleWatchlist({{$anime.MalID}}, '{{$anime.DisplayTitle}}', 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-watchlist-toggle
+            data-mal-id="{{$anime.MalID}}"
+            data-watchlist-title="{{$anime.DisplayTitle}}"
+            class="text-accent hover:text-accent/80 transition-colors focus:outline-none disabled:opacity-50 {{if $isWatchlist}}in-watchlist{{end}}"
+            aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}"
+          >
             <svg class="size-6 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>
diff --git a/templates/components/continue_watching.gohtml b/templates/components/continue_watching.gohtml
index 055af9d..28046de 100644
--- a/templates/components/continue_watching.gohtml
+++ b/templates/components/continue_watching.gohtml
@@ -2,7 +2,7 @@
 <section id="continue-watching-section" class="w-full empty:hidden">
   <h2 class="mb-3 text-lg font-normal text-foreground">Continue Watching</h2>
 
-  <div id="continue-watching-items" class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]" hx-on::after-request="if(this.querySelectorAll('.continue-watching-item').length === 0) document.getElementById('continue-watching-section')?.remove()">
+  <div id="continue-watching-items" class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
     {{range .}}
       {{$title := .TitleOriginal}}
       {{if .TitleEnglish.Valid}}{{$title = .TitleEnglish.String}}{{end}}
@@ -15,7 +15,7 @@
 
           <div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100 bg-black/40 pointer-events-none">
             <div class="flex justify-end pointer-events-auto">
-              <button hx-delete="/api/continue-watching/{{.AnimeID}}" hx-target="#continue-watching-{{.AnimeID}}" hx-swap="delete" hx-on::after-request="if(document.querySelectorAll('.continue-watching-item').length === 0) document.getElementById('continue-watching-section')?.remove()" class="bg-black/60 hover:bg-black/80 rounded-full p-1.5 text-white transition-colors focus:outline-none disabled:opacity-50 backdrop-blur-sm" aria-label="Remove from Continue Watching">
+              <button hx-delete="/api/continue-watching/{{.AnimeID}}" hx-target="#continue-watching-{{.AnimeID}}" hx-swap="delete" class="bg-black/60 hover:bg-black/80 rounded-full p-1.5 text-white transition-colors focus:outline-none disabled:opacity-50 backdrop-blur-sm" aria-label="Remove from Continue Watching">
                 <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
               </button>
             </div>
diff --git a/templates/components/watchlist_actions.gohtml b/templates/components/watchlist_actions.gohtml
index 74d7ada..21f9c12 100644
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -23,16 +23,48 @@
 
     <div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-[var(--shadow-card)] left-0 top-full mt-2">
       <div class="flex flex-col py-1">
-        <button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.DisplayTitle}}', this)">
+        <button
+          data-unstyled-button
+          data-watchlist-update
+          data-mal-id="{{$anime.MalID}}"
+          data-watchlist-status="watching"
+          data-watchlist-display="Watching"
+          data-watchlist-title="{{$anime.DisplayTitle}}"
+          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+        >
           <span class="font-medium text-sm text-foreground">Watching</span>
         </button>
-        <button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'completed', 'Completed', '{{$anime.DisplayTitle}}', this)">
+        <button
+          data-unstyled-button
+          data-watchlist-update
+          data-mal-id="{{$anime.MalID}}"
+          data-watchlist-status="completed"
+          data-watchlist-display="Completed"
+          data-watchlist-title="{{$anime.DisplayTitle}}"
+          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+        >
           <span class="font-medium text-sm text-foreground">Completed</span>
         </button>
-        <button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'plan_to_watch', 'Plan to Watch', '{{$anime.DisplayTitle}}', this)">
+        <button
+          data-unstyled-button
+          data-watchlist-update
+          data-mal-id="{{$anime.MalID}}"
+          data-watchlist-status="plan_to_watch"
+          data-watchlist-display="Plan to Watch"
+          data-watchlist-title="{{$anime.DisplayTitle}}"
+          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+        >
           <span class="font-medium text-sm text-foreground">Plan to Watch</span>
         </button>
-        <button data-unstyled-button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', '{{$anime.DisplayTitle}}', this)">
+        <button
+          data-unstyled-button
+          data-watchlist-update
+          data-mal-id="{{$anime.MalID}}"
+          data-watchlist-status="dropped"
+          data-watchlist-display="Dropped"
+          data-watchlist-title="{{$anime.DisplayTitle}}"
+          class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10 disabled:opacity-50"
+        >
           <span class="font-medium text-sm text-foreground">Dropped</span>
         </button>
         
@@ -56,7 +88,12 @@
 
 {{define "watchlist_remove_button"}}
   <div id="remove-watchlist-container-{{.ID}}" class="{{.ContainerClass}}">
-    <button class="{{.ButtonClass}}" onclick="removeWatchlist({{.ID}}, '{{.Title}}', this)">
+    <button
+      data-watchlist-remove
+      data-mal-id="{{.ID}}"
+      data-watchlist-title="{{.Title}}"
+      class="{{.ButtonClass}} disabled:opacity-50"
+    >
       <span class="{{.SpanClass}}">Remove from Watchlist</span>
     </button>
   </div>
diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index 37cd9a5..bd97dbb 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -1,6 +1,6 @@
 {{define "title"}}Watch {{.Anime.Title}}{{end}}
 {{define "content"}}
-{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
+{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
 {{$anime := .Anime}}
 {{$episodes := .Episodes}}
 {{$currentEpID := .CurrentEpID}}
@@ -28,16 +28,48 @@
         </div>
         <div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-[var(--shadow-card)] right-0 top-full mt-2">
           <div class="flex flex-col py-1">
-            <button data-unstyled-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', '{{$anime.Title}}', this)">
+            <button
+              data-unstyled-button
+              data-watchlist-update
+              data-mal-id="{{$anime.MalID}}"
+              data-watchlist-status="watching"
+              data-watchlist-display="Watching"
+              data-watchlist-title="{{$anime.Title}}"
+              class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
+            >
               <span class="text-sm text-foreground">Watching</span>
             </button>
-            <button data-unstyled-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', '{{$anime.Title}}', this)">
+            <button
+              data-unstyled-button
+              data-watchlist-update
+              data-mal-id="{{$anime.MalID}}"
+              data-watchlist-status="completed"
+              data-watchlist-display="Completed"
+              data-watchlist-title="{{$anime.Title}}"
+              class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
+            >
               <span class="text-sm text-foreground">Completed</span>
             </button>
-            <button data-unstyled-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', '{{$anime.Title}}', this)">
+            <button
+              data-unstyled-button
+              data-watchlist-update
+              data-mal-id="{{$anime.MalID}}"
+              data-watchlist-status="plan_to_watch"
+              data-watchlist-display="Plan to Watch"
+              data-watchlist-title="{{$anime.Title}}"
+              class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
+            >
               <span class="text-sm text-foreground">Plan to Watch</span>
             </button>
-            <button data-unstyled-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', '{{$anime.Title}}', this)">
+            <button
+              data-unstyled-button
+              data-watchlist-update
+              data-mal-id="{{$anime.MalID}}"
+              data-watchlist-status="dropped"
+              data-watchlist-display="Dropped"
+              data-watchlist-title="{{$anime.Title}}"
+              class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover disabled:opacity-50"
+            >
               <span class="text-sm text-foreground">Dropped</span>
             </button>
             {{template "watchlist_remove_button" dict
diff --git a/templates/watchlist.gohtml b/templates/watchlist.gohtml
index 46c6e8b..a4823b7 100644
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -1,6 +1,6 @@
 {{define "title"}}Watchlist{{end}}
 {{define "content"}}
-{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
+{{if .WatchlistIDs}}<script>window.__WATCHLIST_IDS__={{.WatchlistIDs}}</script>{{end}}
 <div id="watchlist-content" class="flex w-full flex-col gap-6">
   <h1 class="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-xl font-normal text-foreground">Watchlist</h1>
 
@@ -53,7 +53,15 @@
 
           <div class="absolute inset-0 z-20 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100 pointer-events-none">
             <div class="flex justify-end">
-              <button type="button" data-unstyled-button hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="closest .watchlist-item" hx-swap="delete" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none pointer-events-auto" aria-label="Remove from Watchlist">
+              <button
+                type="button"
+                data-unstyled-button
+                data-watchlist-remove
+                data-mal-id="{{.AnimeID}}"
+                data-watchlist-title="{{.DisplayTitle}}"
+                class="text-white/70 transition-colors hover:text-white focus:outline-none pointer-events-auto 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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
               </button>
             </div>
diff --git a/templates/watchlist_partial.gohtml b/templates/watchlist_partial.gohtml
index 2a0380e..4e54dd6 100644
--- a/templates/watchlist_partial.gohtml
+++ b/templates/watchlist_partial.gohtml
@@ -48,7 +48,14 @@
 
                   <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="closest .watchlist-item" hx-swap="delete" 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">
+                      <button
+                        type="button"
+                        data-watchlist-remove
+                        data-mal-id="{{.AnimeID}}"
+                        data-watchlist-title="{{.DisplayTitle}}"
+                        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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                       </button>
                     </div>