feat: add toggle watchlist on anime cards and improve dropdown

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) {

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);