refactor: make ts scripts more readable

static/js/anime.ts

@@ -1,62 +1,71 @@
-((): void => {
+export {}
-  const parseClassList = (value: string | null): string[] => {
-    if (!value) {
-      return []
-    }
 
-    return value
+const parseClassList = (value: string | null): string[] => {
-      .split(' ')
+  if (!value) {
-      .map((entry: string): string => entry.trim())
+    return []
-      .filter((entry: string): boolean => entry.length > 0)
   }
 
-  const setMenuState = (menu: HTMLElement, isOpen: boolean): void => {
+  return value
-    const openClasses = parseClassList(menu.getAttribute('data-dropdown-open-classes'))
+    .split(' ')
-    const closedClasses = parseClassList(menu.getAttribute('data-dropdown-closed-classes'))
+    .map((entry: string): string => entry.trim())
+    .filter((entry: string): boolean => entry.length > 0)
+}
 
-    if (isOpen) {
+const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
-      menu.classList.remove(...closedClasses)
+  const openClasses = parseClassList(menu.getAttribute('data-dropdown-open-classes'))
-      menu.classList.add(...openClasses)
+  const closedClasses = parseClassList(menu.getAttribute('data-dropdown-closed-classes'))
-      return
-    }
 
-    menu.classList.remove(...openClasses)
+  if (isOpen) {
-    menu.classList.add(...closedClasses)
+    menu.classList.remove(...closedClasses)
+    menu.classList.add(...openClasses)
+    return
   }
 
-  const toggleDropdown = (): void => {
+  menu.classList.remove(...openClasses)
-    const dropdown = document.getElementById('watchlist-dropdown')
+  menu.classList.add(...closedClasses)
-    if (!dropdown) {
+}
-      return
-    }
 
-    const isOpen = !dropdown.classList.contains('open')
+const setWatchlistDropdownState = (isOpen: boolean): void => {
-    dropdown.classList.toggle('open', isOpen)
+  const dropdown = document.getElementById('watchlist-dropdown')
-    const menu = dropdown.querySelector('[data-dropdown-menu]')
+  if (!dropdown) {
-    if (menu instanceof HTMLElement) {
+    return
-      setMenuState(menu, isOpen)
-    }
   }
 
-  ;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleDropdown
+  dropdown.classList.toggle('open', isOpen)
+  const menu = dropdown.querySelector('[data-dropdown-menu]')
+  if (menu instanceof HTMLElement) {
+    setDropdownMenuState(menu, isOpen)
+  }
+}
 
-  document.addEventListener('click', (event: MouseEvent): void => {
+const toggleWatchlistDropdown = (): void => {
-    const dropdown = document.getElementById('watchlist-dropdown')
+  const dropdown = document.getElementById('watchlist-dropdown')
-    if (!dropdown) {
+  if (!dropdown) {
-      return
+    return
-    }
+  }
 
-    const target = event.target
+  setWatchlistDropdownState(!dropdown.classList.contains('open'))
-    if (!(target instanceof Node)) {
+}
-      return
-    }
 
-    if (!dropdown.contains(target)) {
+const closeDropdownOnOutsideClick = (event: MouseEvent): void => {
-      dropdown.classList.remove('open')
+  const dropdown = document.getElementById('watchlist-dropdown')
-      const menu = dropdown.querySelector('[data-dropdown-menu]')
+  if (!dropdown) {
-      if (menu instanceof HTMLElement) {
+    return
-        setMenuState(menu, false)
+  }
-      }
+
-    }
+  const target = event.target
-  })
+  if (!(target instanceof Node)) {
-})()
+    return
+  }
+
+  if (!dropdown.contains(target)) {
+    setWatchlistDropdownState(false)
+  }
+}
+
+const initWatchlistDropdown = (): void => {
+  ;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleWatchlistDropdown
+  document.addEventListener('click', closeDropdownOnOutsideClick)
+}
+
+initWatchlistDropdown()

static/js/auth.ts

@@ -1,3 +1,5 @@
+export {}
+
 function copyRecoveryKey(keyElementId: string, feedbackElementId: string): void {
   const keyElement = document.getElementById(keyElementId)
   const feedbackElement = document.getElementById(feedbackElementId)

static/js/discover.ts

@@ -1,46 +1,52 @@
-((): void => {
+export {}
-  const parseClassList = (value: string | null): string[] => {
-    if (!value) {
-      return []
-    }
 
-    return value
+const parseClassList = (value: string | null): string[] => {
-      .split(' ')
+  if (!value) {
-      .map((entry: string): string => entry.trim())
+    return []
-      .filter((entry: string): boolean => entry.length > 0)
   }
 
-  const setActiveTab = (clickedTab: Element): void => {
+  return value
-    const group = clickedTab.closest('[data-tab-group="discover"]')
+    .split(' ')
-    if (!group) {
+    .map((entry: string): string => entry.trim())
-      return
+    .filter((entry: string): boolean => entry.length > 0)
-    }
+}
 
-    const triggers = group.querySelectorAll('[data-tab-trigger]')
+const setActiveDiscoverTab = (clickedTab: Element): void => {
-    triggers.forEach((tab: Element): void => {
+  const group = clickedTab.closest('[data-tab-group="discover"]')
-      const activeClasses = parseClassList(tab.getAttribute('data-tab-active-classes'))
+  if (!group) {
-      const inactiveClasses = parseClassList(tab.getAttribute('data-tab-inactive-classes'))
+    return
-      tab.classList.remove(...activeClasses)
-      tab.classList.add(...inactiveClasses)
-    })
-
-    const activeClasses = parseClassList(clickedTab.getAttribute('data-tab-active-classes'))
-    const inactiveClasses = parseClassList(clickedTab.getAttribute('data-tab-inactive-classes'))
-    clickedTab.classList.remove(...inactiveClasses)
-    clickedTab.classList.add(...activeClasses)
   }
 
-  document.addEventListener('click', (event: MouseEvent): void => {
+  const triggers = group.querySelectorAll('[data-tab-trigger]')
-    const target = event.target
+  triggers.forEach((tab: Element): void => {
-    if (!(target instanceof Element)) {
+    const activeClasses = parseClassList(tab.getAttribute('data-tab-active-classes'))
-      return
+    const inactiveClasses = parseClassList(tab.getAttribute('data-tab-inactive-classes'))
-    }
+    tab.classList.remove(...activeClasses)
-
+    tab.classList.add(...inactiveClasses)
-    const trigger = target.closest('[data-tab-trigger]')
-    if (!trigger) {
-      return
-    }
-
-    setActiveTab(trigger)
   })
-})()
+
+  const activeClasses = parseClassList(clickedTab.getAttribute('data-tab-active-classes'))
+  const inactiveClasses = parseClassList(clickedTab.getAttribute('data-tab-inactive-classes'))
+  clickedTab.classList.remove(...inactiveClasses)
+  clickedTab.classList.add(...activeClasses)
+}
+
+const onDiscoverTabClick = (event: MouseEvent): void => {
+  const target = event.target
+  if (!(target instanceof Element)) {
+    return
+  }
+
+  const trigger = target.closest('[data-tab-trigger]')
+  if (!trigger) {
+    return
+  }
+
+  setActiveDiscoverTab(trigger)
+}
+
+const initDiscoverTabs = (): void => {
+  document.addEventListener('click', onDiscoverTabClick)
+}
+
+initDiscoverTabs()

static/js/search.ts

@@ -1,127 +1,167 @@
-((): void => {
+export {}
-  const globalWindow = window as Window & { searchInitialized?: boolean }
+
+type QuickSearchResult = {
+  id?: number
+  image?: string
+  title?: string
+  type?: string
+}
+
+const globalWindow = window as Window & { searchInitialized?: boolean }
+
+let searchTimeout: number | undefined
+const searchInput = document.getElementById('search-input') as HTMLInputElement | null
+const searchDropdown = document.querySelector('[data-search-results-container]') as HTMLElement | null
+
+const isSafeImageUrl = (rawUrl?: string): boolean => {
+  if (!rawUrl || typeof rawUrl !== 'string') {
+    return false
+  }
+
+  try {
+    const parsed = new URL(rawUrl, window.location.origin)
+    return parsed.protocol === 'https:' || parsed.protocol === 'http:'
+  } catch {
+    return false
+  }
+}
+
+const clearSearchResults = (): void => {
+  if (!searchDropdown) {
+    return
+  }
+
+  searchDropdown.replaceChildren()
+}
+
+const buildSearchResultItem = (result: QuickSearchResult): HTMLAnchorElement => {
+  const item = document.createElement('a')
+  item.className = 'flex items-start gap-3 px-3 py-2 text-inherit no-underline hover:bg-[var(--panel-soft)] hover:no-underline'
+  item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')))
+
+  if (isSafeImageUrl(result.image)) {
+    const img = document.createElement('img')
+    img.className = 'aspect-[2/3] w-[42px] shrink-0 object-cover bg-[var(--surface-thumb)]'
+    img.setAttribute('src', result.image || '')
+    img.setAttribute('alt', String(result.title || ''))
+    item.appendChild(img)
+  } else {
+    const noImage = document.createElement('div')
+    noImage.className = 'aspect-[2/3] w-[42px] shrink-0 bg-[var(--surface-thumb)] text-[0] text-transparent'
+    noImage.textContent = 'no image'
+    item.appendChild(noImage)
+  }
+
+  const info = document.createElement('div')
+  info.className = 'grid min-w-0 gap-px'
+
+  const itemTitle = document.createElement('div')
+  itemTitle.className = 'line-clamp-1 text-[0.86rem] leading-[1.3] text-[var(--text)]'
+  itemTitle.textContent = String(result.title || '')
+  info.appendChild(itemTitle)
+
+  const itemType = document.createElement('div')
+  itemType.className = 'text-[0.67rem] text-[var(--text-faint)]'
+  itemType.textContent = String(result.type || '')
+  info.appendChild(itemType)
+
+  item.appendChild(info)
+  return item
+}
+
+const renderQuickSearchResults = (query: string, results: QuickSearchResult[]): void => {
+  if (!searchDropdown) {
+    return
+  }
+
+  if (!results || results.length === 0) {
+    clearSearchResults()
+    return
+  }
+
+  const searchResults = document.createElement('div')
+  searchResults.className = 'grid'
+
+  const title = document.createElement('div')
+  title.className = 'px-3 py-2 text-[0.68rem] text-[var(--text-faint)]'
+  title.textContent = 'Anime'
+  searchResults.appendChild(title)
+
+  results.forEach((result: QuickSearchResult): void => {
+    searchResults.appendChild(buildSearchResultItem(result))
+  })
+
+  const viewAll = document.createElement('a')
+  viewAll.className = 'bg-[var(--surface-search-view-all)] px-3 py-2 text-center text-[0.8rem] text-[var(--text-muted)] no-underline hover:bg-[var(--panel-soft)] hover:text-[var(--text)] hover:no-underline'
+  viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query))
+  viewAll.textContent = 'View all results for ' + query
+  searchResults.appendChild(viewAll)
+
+  searchDropdown.replaceChildren(searchResults)
+}
+
+const fetchAndRenderQuickSearch = (query: string): void => {
+  fetch('/api/search-quick?q=' + encodeURIComponent(query))
+    .then((res: Response) => res.json())
+    .then((results: QuickSearchResult[]): void => {
+      renderQuickSearchResults(query, results)
+    })
+    .catch((err: unknown): void => {
+      console.error('Search error:', err)
+    })
+}
+
+const onSearchInput = (event: Event): void => {
+  if (searchTimeout) {
+    window.clearTimeout(searchTimeout)
+  }
+
+  const target = event.target
+  if (!(target instanceof HTMLInputElement)) {
+    return
+  }
+
+  const query = target.value.trim()
+  if (query.length < 2) {
+    clearSearchResults()
+    return
+  }
+
+  searchTimeout = window.setTimeout((): void => {
+    fetchAndRenderQuickSearch(query)
+  }, 300)
+}
+
+const onSearchBlur = (): void => {
+  window.setTimeout((): void => {
+    clearSearchResults()
+  }, 200)
+}
+
+const onDocumentClick = (event: MouseEvent): void => {
+  const target = event.target
+  if (!(target instanceof Element)) {
+    return
+  }
+
+  if (!target.closest('[data-search-root]')) {
+    clearSearchResults()
+  }
+}
+
+const initQuickSearch = (): void => {
   if (globalWindow.searchInitialized) {
     return
   }
   globalWindow.searchInitialized = true
 
-  let searchTimeout: number | undefined
-  const searchInput = document.getElementById('search-input') as HTMLInputElement | null
-  const searchDropdown = document.querySelector('[data-search-results-container]') as HTMLElement | null
-
   if (!searchInput || !searchDropdown) {
     return
   }
 
-  searchInput.addEventListener('input', (event: Event): void => {
+  searchInput.addEventListener('input', onSearchInput)
-    if (searchTimeout) {
+  searchInput.addEventListener('blur', onSearchBlur)
-      window.clearTimeout(searchTimeout)
+  document.addEventListener('click', onDocumentClick)
-    }
+}
 
-    const target = event.target
+initQuickSearch()
-    if (!(target instanceof HTMLInputElement)) {
-      return
-    }
-
-    const query = target.value.trim()
-    if (query.length < 2) {
-      searchDropdown.replaceChildren()
-      return
-    }
-
-    searchTimeout = window.setTimeout((): void => {
-      fetch('/api/search-quick?q=' + encodeURIComponent(query))
-        .then((res: Response) => res.json())
-        .then((results: Array<{ id?: number; image?: string; title?: string; type?: string }>): void => {
-          if (!results || results.length === 0) {
-            searchDropdown.replaceChildren()
-            return
-          }
-
-          const searchResults = document.createElement('div')
-          searchResults.className = 'grid'
-
-          const title = document.createElement('div')
-          title.className = 'px-3 py-2 text-[0.68rem] text-[var(--text-faint)]'
-          title.textContent = 'Anime'
-          searchResults.appendChild(title)
-
-          results.forEach((result): void => {
-            const item = document.createElement('a')
-            item.className = 'flex items-start gap-3 px-3 py-2 text-inherit no-underline hover:bg-[var(--panel-soft)] hover:no-underline'
-            item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')))
-
-            if (isSafeImageUrl(result.image)) {
-              const img = document.createElement('img')
-              img.className = 'aspect-[2/3] w-[42px] shrink-0 object-cover bg-[var(--surface-thumb)]'
-              img.setAttribute('src', result.image || '')
-              img.setAttribute('alt', String(result.title || ''))
-              item.appendChild(img)
-            } else {
-              const noImage = document.createElement('div')
-              noImage.className = 'aspect-[2/3] w-[42px] shrink-0 bg-[var(--surface-thumb)] text-[0] text-transparent'
-              noImage.textContent = 'no image'
-              item.appendChild(noImage)
-            }
-
-            const info = document.createElement('div')
-            info.className = 'grid min-w-0 gap-px'
-
-            const itemTitle = document.createElement('div')
-            itemTitle.className = 'line-clamp-1 text-[0.86rem] leading-[1.3] text-[var(--text)]'
-            itemTitle.textContent = String(result.title || '')
-            info.appendChild(itemTitle)
-
-            const itemType = document.createElement('div')
-            itemType.className = 'text-[0.67rem] text-[var(--text-faint)]'
-            itemType.textContent = String(result.type || '')
-            info.appendChild(itemType)
-
-            item.appendChild(info)
-            searchResults.appendChild(item)
-          })
-
-          const viewAll = document.createElement('a')
-          viewAll.className = 'bg-[var(--surface-search-view-all)] px-3 py-2 text-center text-[0.8rem] text-[var(--text-muted)] no-underline hover:bg-[var(--panel-soft)] hover:text-[var(--text)] hover:no-underline'
-          viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query))
-          viewAll.textContent = 'View all results for ' + query
-          searchResults.appendChild(viewAll)
-
-          searchDropdown.replaceChildren(searchResults)
-        })
-        .catch((err: unknown): void => {
-          console.error('Search error:', err)
-        })
-    }, 300)
-  })
-
-  searchInput.addEventListener('blur', (): void => {
-    window.setTimeout((): void => {
-      searchDropdown.replaceChildren()
-    }, 200)
-  })
-
-  document.addEventListener('click', (event: MouseEvent): void => {
-    const target = event.target
-    if (!(target instanceof Element)) {
-      return
-    }
-
-    if (!target.closest('[data-search-root]')) {
-      searchDropdown.replaceChildren()
-    }
-  })
-
-  function isSafeImageUrl(rawUrl?: string): boolean {
-    if (!rawUrl || typeof rawUrl !== 'string') {
-      return false
-    }
-
-    try {
-      const parsed = new URL(rawUrl, window.location.origin)
-      return parsed.protocol === 'https:' || parsed.protocol === 'http:'
-    } catch {
-      return false
-    }
-  }
-})()

static/js/timezone.ts

@@ -1,5 +1,6 @@
-((): void => {
+export {}
-  const jstOffsetMinutes = 9 * 60
+
+const jstOffsetMinutes = 9 * 60
 
   type ParsedBroadcast = {
     day: string
@@ -241,6 +242,9 @@
     nodes.forEach((node: Element): void => updateNode(node, localOffsetMinutes))
   }
 
+const initTimezoneConversion = (): void => {
   document.addEventListener('DOMContentLoaded', updateAll)
   document.body.addEventListener('htmx:afterSwap', updateAll)
-})()
+}
+
+initTimezoneConversion()