refactor: make ts scripts more readable

static/js/anime.ts

@@ -1,5 +1,6 @@
-((): void => {
+export {}
-  const parseClassList = (value: string | null): string[] => {
+
+const parseClassList = (value: string | null): string[] => {
   if (!value) {
     return []
   }
@@ -8,9 +9,9 @@
     .split(' ')
     .map((entry: string): string => entry.trim())
     .filter((entry: string): boolean => entry.length > 0)
-  }
+}
 
-  const setMenuState = (menu: HTMLElement, isOpen: boolean): void => {
+const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
   const openClasses = parseClassList(menu.getAttribute('data-dropdown-open-classes'))
   const closedClasses = parseClassList(menu.getAttribute('data-dropdown-closed-classes'))
 
@@ -22,25 +23,31 @@
 
   menu.classList.remove(...openClasses)
   menu.classList.add(...closedClasses)
-  }
+}
 
-  const toggleDropdown = (): void => {
+const setWatchlistDropdownState = (isOpen: boolean): void => {
   const dropdown = document.getElementById('watchlist-dropdown')
   if (!dropdown) {
     return
   }
 
-    const isOpen = !dropdown.classList.contains('open')
   dropdown.classList.toggle('open', isOpen)
   const menu = dropdown.querySelector('[data-dropdown-menu]')
   if (menu instanceof HTMLElement) {
-      setMenuState(menu, isOpen)
+    setDropdownMenuState(menu, isOpen)
   }
+}
+
+const toggleWatchlistDropdown = (): void => {
+  const dropdown = document.getElementById('watchlist-dropdown')
+  if (!dropdown) {
+    return
   }
 
-  ;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleDropdown
+  setWatchlistDropdownState(!dropdown.classList.contains('open'))
+}
 
-  document.addEventListener('click', (event: MouseEvent): void => {
+const closeDropdownOnOutsideClick = (event: MouseEvent): void => {
   const dropdown = document.getElementById('watchlist-dropdown')
   if (!dropdown) {
     return
@@ -52,11 +59,13 @@
   }
 
   if (!dropdown.contains(target)) {
-      dropdown.classList.remove('open')
+    setWatchlistDropdownState(false)
-      const menu = dropdown.querySelector('[data-dropdown-menu]')
-      if (menu instanceof HTMLElement) {
-        setMenuState(menu, 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,5 +1,6 @@
-((): void => {
+export {}
-  const parseClassList = (value: string | null): string[] => {
+
+const parseClassList = (value: string | null): string[] => {
   if (!value) {
     return []
   }
@@ -8,9 +9,9 @@
     .split(' ')
     .map((entry: string): string => entry.trim())
     .filter((entry: string): boolean => entry.length > 0)
-  }
+}
 
-  const setActiveTab = (clickedTab: Element): void => {
+const setActiveDiscoverTab = (clickedTab: Element): void => {
   const group = clickedTab.closest('[data-tab-group="discover"]')
   if (!group) {
     return
@@ -28,9 +29,9 @@
   const inactiveClasses = parseClassList(clickedTab.getAttribute('data-tab-inactive-classes'))
   clickedTab.classList.remove(...inactiveClasses)
   clickedTab.classList.add(...activeClasses)
-  }
+}
 
-  document.addEventListener('click', (event: MouseEvent): void => {
+const onDiscoverTabClick = (event: MouseEvent): void => {
   const target = event.target
   if (!(target instanceof Element)) {
     return
@@ -41,6 +42,11 @@
     return
   }
 
-    setActiveTab(trigger)
+  setActiveDiscoverTab(trigger)
-  })
+}
-})()
+
+const initDiscoverTabs = (): void => {
+  document.addEventListener('click', onDiscoverTabClick)
+}
+
+initDiscoverTabs()

static/js/search.ts

@@ -1,52 +1,40 @@
-((): void => {
+export {}
-  const globalWindow = window as Window & { searchInitialized?: boolean }
+
-  if (globalWindow.searchInitialized) {
+type QuickSearchResult = {
-    return
+  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
   }
-  globalWindow.searchInitialized = true
 
-  let searchTimeout: number | undefined
+  try {
-  const searchInput = document.getElementById('search-input') as HTMLInputElement | null
+    const parsed = new URL(rawUrl, window.location.origin)
-  const searchDropdown = document.querySelector('[data-search-results-container]') as HTMLElement | null
+    return parsed.protocol === 'https:' || parsed.protocol === 'http:'
+  } catch {
+    return false
+  }
+}
 
-  if (!searchInput || !searchDropdown) {
+const clearSearchResults = (): void => {
+  if (!searchDropdown) {
     return
   }
 
-  searchInput.addEventListener('input', (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) {
   searchDropdown.replaceChildren()
-      return
+}
-    }
 
-    searchTimeout = window.setTimeout((): void => {
+const buildSearchResultItem = (result: QuickSearchResult): HTMLAnchorElement => {
-      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 || '')))
@@ -78,7 +66,29 @@
   info.appendChild(itemType)
 
   item.appendChild(info)
-            searchResults.appendChild(item)
+  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')
@@ -88,40 +98,70 @@
   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)
-  })
+}
 
-  searchInput.addEventListener('blur', (): void => {
+const onSearchBlur = (): void => {
   window.setTimeout((): void => {
-      searchDropdown.replaceChildren()
+    clearSearchResults()
   }, 200)
-  })
+}
 
-  document.addEventListener('click', (event: MouseEvent): void => {
+const onDocumentClick = (event: MouseEvent): void => {
   const target = event.target
   if (!(target instanceof Element)) {
     return
   }
 
   if (!target.closest('[data-search-root]')) {
-      searchDropdown.replaceChildren()
+    clearSearchResults()
   }
-  })
+}
 
-  function isSafeImageUrl(rawUrl?: string): boolean {
+const initQuickSearch = (): void => {
-    if (!rawUrl || typeof rawUrl !== 'string') {
+  if (globalWindow.searchInitialized) {
-      return false
+    return
+  }
+  globalWindow.searchInitialized = true
+
+  if (!searchInput || !searchDropdown) {
+    return
   }
 
-    try {
+  searchInput.addEventListener('input', onSearchInput)
-      const parsed = new URL(rawUrl, window.location.origin)
+  searchInput.addEventListener('blur', onSearchBlur)
-      return parsed.protocol === 'https:' || parsed.protocol === 'http:'
+  document.addEventListener('click', onDocumentClick)
-    } catch {
+}
-      return false
+
-    }
+initQuickSearch()
-  }
-})()

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