fix: remove inline onclick

static/anime.ts

@@ -1,5 +1,28 @@
 import { parseClassList } from './utils';
 
+const initSynopsisToggle = (): void => {
+  document.addEventListener('click', e => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+
+    const btn = target.closest<HTMLButtonElement>('[data-synopsis-toggle]');
+    if (!btn) return;
+    const container = document.getElementById('synopsis-container');
+    if (!container) return;
+
+    const isClamped = container.classList.contains('line-clamp-6');
+    if (isClamped) {
+      container.classList.remove('line-clamp-6');
+      btn.textContent = 'Show less';
+      return;
+    }
+    container.classList.add('line-clamp-6');
+    btn.textContent = 'Read more';
+  });
+};
+
+initSynopsisToggle();
+
 const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
   // data attributes store the class lists to add/remove
   const openClasses = parseClassList(menu.getAttribute('data-dropdown-open-classes'));

static/discover.ts

@@ -41,3 +41,56 @@ const initDiscoverTabs = (): void => {
 };
 
 initDiscoverTabs();
+
+const initSurpriseMe = (): void => {
+  let isFetchingRandom = false;
+
+  const onClick = async (): Promise<void> => {
+    if (isFetchingRandom) return;
+
+    const btn = document.getElementById('surprise-btn') as HTMLButtonElement | null;
+    if (!btn) return;
+    isFetchingRandom = true;
+
+    const spinner = document.getElementById('surprise-spinner');
+    const text = document.getElementById('surprise-text');
+    const icon = document.getElementById('surprise-icon');
+
+    btn.disabled = true;
+    spinner?.classList.remove('hidden');
+    icon?.classList.add('hidden');
+    if (text) text.textContent = 'Picking…';
+
+    try {
+      const res = await fetch(`/api/jikan/random/anime?t=${Date.now()}`, { cache: 'no-store' });
+      if (!res.ok) throw new Error('Failed to fetch random anime');
+      const json = (await res.json()) as unknown;
+      const data = (json as { data?: unknown }).data as { mal_id?: unknown } | undefined;
+      const malId = typeof data?.mal_id === 'number' ? data.mal_id : 0;
+      if (malId > 0) {
+        window.location.href = `/anime/${malId}`;
+        return;
+      }
+      throw new Error('Random anime missing mal_id');
+    } catch (error) {
+      console.error(error);
+      alert('Could not pick a random anime right now. Please try again.');
+    } finally {
+      isFetchingRandom = false;
+      btn.disabled = false;
+      spinner?.classList.add('hidden');
+      icon?.classList.remove('hidden');
+      if (text) text.textContent = 'Surprise Me';
+    }
+  };
+
+  document.addEventListener('click', e => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    const surprise = target.closest('[data-surprise-me]');
+    if (!surprise) return;
+    void onClick();
+  });
+};
+
+initSurpriseMe();

static/dropdown.ts

@@ -64,3 +64,25 @@ class UIDropdown extends HTMLElement {
 }
 
 customElements.define('ui-dropdown', UIDropdown);
+
+const initStudioDropdown = (): void => {
+  document.addEventListener('click', e => {
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+
+    const btn = target.closest<HTMLButtonElement>('button[data-studio-select]');
+    if (!btn) return;
+
+    const input = document.getElementById('studio-input') as HTMLInputElement | null;
+    const form = document.getElementById('browse-search-form') as HTMLFormElement | null;
+    if (!input || !form) return;
+
+    input.value = btn.dataset.studioSelect ?? '';
+    form.requestSubmit();
+
+    const dropdown = btn.closest('ui-dropdown') as { close?: () => void } | null;
+    dropdown?.close?.();
+  });
+};
+
+initStudioDropdown();