refactor: migrate browser scripts to ts

static/js/anime.js

@@ -1,28 +1,24 @@
-;(function () {
+"use strict";
+(() => {
     const toggleDropdown = () => {
-    const dropdown = document.getElementById('watchlist-dropdown')
+        const dropdown = document.getElementById('watchlist-dropdown');
         if (!dropdown) {
-      return
+            return;
         }
-
+        dropdown.classList.toggle('open');
-    dropdown.classList.toggle('open')
+    };
-  }
+    window.toggleDropdown = toggleDropdown;
-
-  window.toggleDropdown = toggleDropdown
-
     document.addEventListener('click', (event) => {
-    const dropdown = document.getElementById('watchlist-dropdown')
+        const dropdown = document.getElementById('watchlist-dropdown');
         if (!dropdown) {
-      return
+            return;
         }
-
+        const target = event.target;
-    const target = event.target
         if (!(target instanceof Node)) {
-      return
+            return;
         }
-
         if (!dropdown.contains(target)) {
-      dropdown.classList.remove('open')
+            dropdown.classList.remove('open');
         }
-  })
+    });
-})()
+})();

static/js/auth.js

@@ -1,19 +1,23 @@
+"use strict";
 function copyRecoveryKey(keyElementId, feedbackElementId) {
-  var keyElement = document.getElementById(keyElementId)
+    const keyElement = document.getElementById(keyElementId);
-  var feedbackElement = document.getElementById(feedbackElementId)
+    const feedbackElement = document.getElementById(feedbackElementId);
-
     if (!keyElement || !feedbackElement) {
-    return
+        return;
     }
-
+    const key = keyElement.textContent || '';
-  var key = keyElement.textContent || ''
+    navigator.clipboard
-  navigator.clipboard.writeText(key).then(function () {
+        .writeText(key)
-    feedbackElement.textContent = 'Recovery key copied.'
+        .then(() => {
-  }).catch(function () {
+        feedbackElement.textContent = 'Recovery key copied.';
-    feedbackElement.textContent = 'Copy failed. Select and copy manually.'
     })
+        .catch(() => {
+        feedbackElement.textContent = 'Copy failed. Select and copy manually.';
+    });
 }
-
 function confirmDangerAction(message) {
-  return window.confirm(message)
+    return window.confirm(message);
 }
+;
+window.copyRecoveryKey = copyRecoveryKey;
+window.confirmDangerAction = confirmDangerAction;

static/js/discover.js

@@ -1,26 +1,23 @@
-;(function () {
+"use strict";
+(() => {
     const setActiveTab = (clickedTab) => {
-    const group = clickedTab.closest('[data-tab-group="discover"]')
+        const group = clickedTab.closest('[data-tab-group="discover"]');
         if (!group) {
-      return
+            return;
         }
-
+        const triggers = group.querySelectorAll('[data-tab-trigger]');
-    const triggers = group.querySelectorAll('[data-tab-trigger]')
+        triggers.forEach((tab) => tab.classList.remove('active'));
-    triggers.forEach((tab) => tab.classList.remove('active'))
+        clickedTab.classList.add('active');
-    clickedTab.classList.add('active')
+    };
-  }
-
     document.addEventListener('click', (event) => {
-    const target = event.target
+        const target = event.target;
         if (!(target instanceof Element)) {
-      return
+            return;
         }
-
+        const trigger = target.closest('[data-tab-trigger]');
-    const trigger = target.closest('[data-tab-trigger]')
         if (!trigger) {
-      return
+            return;
         }
-
+        setActiveTab(trigger);
-    setActiveTab(trigger)
+    });
-  })
+})();
-})()

static/js/search.js

@@ -1,108 +1,109 @@
-(function() {
+"use strict";
-  if (window.searchInitialized) return
+(() => {
-  window.searchInitialized = true
+    const globalWindow = window;
-
+    if (globalWindow.searchInitialized) {
-  let searchTimeout
+        return;
-  const searchInput = document.getElementById('search-input')
+    }
-  const searchDropdown = document.getElementById('search-dropdown')
+    globalWindow.searchInitialized = true;
-
+    let searchTimeout;
-  if (searchInput) {
+    const searchInput = document.getElementById('search-input');
-    searchInput.addEventListener('input', function(e) {
+    const searchDropdown = document.getElementById('search-dropdown');
-      clearTimeout(searchTimeout)
+    if (!searchInput || !searchDropdown) {
-      const query = e.target.value.trim()
+        return;
-
+    }
+    searchInput.addEventListener('input', (event) => {
+        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()
+            searchDropdown.replaceChildren();
-        return
+            return;
         }
-
+        searchTimeout = window.setTimeout(() => {
-      searchTimeout = setTimeout(() => {
             fetch('/api/search-quick?q=' + encodeURIComponent(query))
-          .then(res => res.json())
+                .then((res) => res.json())
-          .then(results => {
+                .then((results) => {
                 if (!results || results.length === 0) {
-              searchDropdown.replaceChildren()
+                    searchDropdown.replaceChildren();
-              return
+                    return;
                 }
-
+                const searchResults = document.createElement('div');
-            const searchResults = document.createElement('div')
+                searchResults.className = 'search-results';
-            searchResults.className = 'search-results'
+                const title = document.createElement('div');
-
+                title.className = 'search-results-title';
-            const title = document.createElement('div')
+                title.textContent = 'Anime';
-            title.className = 'search-results-title'
+                searchResults.appendChild(title);
-            title.textContent = 'Anime'
+                results.forEach((result) => {
-            searchResults.appendChild(title)
+                    const item = document.createElement('a');
-
+                    item.className = 'search-result-item';
-            results.forEach(r => {
+                    item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')));
-              const item = document.createElement('a')
+                    if (isSafeImageUrl(result.image)) {
-              item.className = 'search-result-item'
+                        const img = document.createElement('img');
-              item.setAttribute('href', '/anime/' + encodeURIComponent(String(r.id || '')))
+                        img.className = 'search-result-thumb';
-
+                        img.setAttribute('src', result.image || '');
-              if (isSafeImageUrl(r.image)) {
+                        img.setAttribute('alt', String(result.title || ''));
-                const img = document.createElement('img')
+                        item.appendChild(img);
-                img.className = 'search-result-thumb'
-                img.setAttribute('src', r.image)
-                img.setAttribute('alt', String(r.title || ''))
-                item.appendChild(img)
-              } else {
-                const noImage = document.createElement('div')
-                noImage.className = 'search-result-no-image'
-                noImage.textContent = 'no image'
-                item.appendChild(noImage)
                     }
-
+                    else {
-              const info = document.createElement('div')
+                        const noImage = document.createElement('div');
-              info.className = 'search-result-info'
+                        noImage.className = 'search-result-no-image';
-
+                        noImage.textContent = 'no image';
-              const itemTitle = document.createElement('div')
+                        item.appendChild(noImage);
-              itemTitle.className = 'search-result-title'
+                    }
-              itemTitle.textContent = String(r.title || '')
+                    const info = document.createElement('div');
-              info.appendChild(itemTitle)
+                    info.className = 'search-result-info';
-
+                    const itemTitle = document.createElement('div');
-              const itemType = document.createElement('div')
+                    itemTitle.className = 'search-result-title';
-              itemType.className = 'search-result-type'
+                    itemTitle.textContent = String(result.title || '');
-              itemType.textContent = String(r.type || '')
+                    info.appendChild(itemTitle);
-              info.appendChild(itemType)
+                    const itemType = document.createElement('div');
-
+                    itemType.className = 'search-result-type';
-              item.appendChild(info)
+                    itemType.textContent = String(result.type || '');
-              searchResults.appendChild(item)
+                    info.appendChild(itemType);
+                    item.appendChild(info);
+                    searchResults.appendChild(item);
+                });
+                const viewAll = document.createElement('a');
+                viewAll.className = 'search-result-view-all';
+                viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query));
+                viewAll.textContent = 'View all results for ' + query;
+                searchResults.appendChild(viewAll);
+                searchDropdown.replaceChildren(searchResults);
             })
-
+                .catch((err) => {
-            const viewAll = document.createElement('a')
+                console.error('Search error:', err);
-            viewAll.className = 'search-result-view-all'
+            });
-            viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query))
+        }, 300);
-            viewAll.textContent = 'View all results for ' + query
+    });
-            searchResults.appendChild(viewAll)
-
-            searchDropdown.replaceChildren(searchResults)
-          })
-          .catch(err => console.error('Search error:', err))
-      }, 300)
-    })
-
     searchInput.addEventListener('blur', () => {
-      setTimeout(() => {
+        window.setTimeout(() => {
-        searchDropdown.replaceChildren()
+            searchDropdown.replaceChildren();
-      }, 200)
+        }, 200);
-    })
+    });
-
+    document.addEventListener('click', (event) => {
-    document.addEventListener('click', (e) => {
+        const target = event.target;
-      if (!e.target.closest('.header-search-wrapper')) {
+        if (!(target instanceof Element)) {
-        searchDropdown.replaceChildren()
+            return;
         }
-    })
+        if (!target.closest('.header-search-wrapper')) {
+            searchDropdown.replaceChildren();
         }
-
+    });
     function isSafeImageUrl(rawUrl) {
         if (!rawUrl || typeof rawUrl !== 'string') {
-      return false
+            return false;
         }
-
         try {
-      const parsed = new URL(rawUrl, window.location.origin)
+            const parsed = new URL(rawUrl, window.location.origin);
-      return parsed.protocol === 'https:' || parsed.protocol === 'http:'
+            return parsed.protocol === 'https:' || parsed.protocol === 'http:';
-    } catch {
+        }
-      return false
+        catch {
+            return false;
         }
     }
-})()
+})();

static/js/timezone.js

@@ -1,78 +1,62 @@
-;(function () {
+"use strict";
-  const jstOffsetMinutes = 9 * 60
+(() => {
-
+    const jstOffsetMinutes = 9 * 60;
     const parseBroadcastTime = (value) => {
         if (!value || typeof value !== 'string') {
-      return null
+            return null;
         }
-
+        const match = value.trim().match(/^(\d{1,2}):(\d{2})$/);
-    const match = value.trim().match(/^(\d{1,2}):(\d{2})$/)
         if (!match) {
-      return null
+            return null;
         }
-
+        const hour = Number.parseInt(match[1], 10);
-    const hour = Number.parseInt(match[1], 10)
+        const minute = Number.parseInt(match[2], 10);
-    const minute = Number.parseInt(match[2], 10)
         if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
-      return null
+            return null;
         }
-
+        return { hour, minute };
-    return { hour, minute }
+    };
-  }
-
     const isJstTimezone = (timezone) => {
         if (!timezone) {
-      return true
+            return true;
         }
-
+        const normalized = timezone.trim().toLowerCase();
-    const normalized = timezone.trim().toLowerCase()
+        return normalized === 'asia/tokyo' || normalized === 'jst';
-    return normalized === 'asia/tokyo' || normalized === 'jst'
+    };
-  }
-
     const parseFromStructuredAttrs = (node) => {
-    const day = node.getAttribute('data-broadcast-day')
+        const day = node.getAttribute('data-broadcast-day');
-    const time = node.getAttribute('data-broadcast-time')
+        const time = node.getAttribute('data-broadcast-time');
-    const timezone = node.getAttribute('data-broadcast-timezone')
+        const timezone = node.getAttribute('data-broadcast-timezone');
-
         if (!day || !time || !isJstTimezone(timezone)) {
-      return null
+            return null;
         }
-
+        const parsedTime = parseBroadcastTime(time);
-    const parsedTime = parseBroadcastTime(time)
         if (!parsedTime) {
-      return null
+            return null;
         }
-
+        return { day: day.trim(), hour: parsedTime.hour, minute: parsedTime.minute };
-    return { day: day.trim(), hour: parsedTime.hour, minute: parsedTime.minute }
+    };
-  }
-
     const parseBroadcast = (text) => {
         if (!text || typeof text !== 'string') {
-      return null
+            return null;
         }
-
+        const match = text.match(/^(.*) at (\d{1,2}):(\d{2}) \(JST\)$/i);
-    const match = text.match(/^(.*) at (\d{1,2}):(\d{2}) \(JST\)$/i)
         if (!match) {
-      return null
+            return null;
         }
-
+        const day = match[1].trim();
-    const day = match[1].trim()
+        const hour = Number.parseInt(match[2], 10);
-    const hour = Number.parseInt(match[2], 10)
+        const minute = Number.parseInt(match[3], 10);
-    const minute = Number.parseInt(match[3], 10)
-
         if (Number.isNaN(hour) || Number.isNaN(minute)) {
-      return null
+            return null;
         }
-
         if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
-      return null
+            return null;
         }
-
+        return { day, hour, minute };
-    return { day, hour, minute }
+    };
-  }
-
     const normalizeDay = (day) => {
-    const key = day.trim().toLowerCase().replace(/s$/, '')
+        const key = day.trim().toLowerCase().replace(/s$/, '');
         const days = {
             mon: 1,
             monday: 1,
@@ -91,150 +75,121 @@
             saturday: 6,
             sun: 0,
             sunday: 0,
-    }
+        };
-
         if (typeof days[key] !== 'number') {
-      return null
+            return null;
         }
-
+        return days[key];
-    return days[key]
+    };
-  }
-
     const convertToLocal = (parsed, localOffsetMinutes) => {
-    const sourceMinutes = parsed.hour * 60 + parsed.minute
+        const sourceMinutes = parsed.hour * 60 + parsed.minute;
-    const diff = jstOffsetMinutes - localOffsetMinutes
+        const diff = jstOffsetMinutes - localOffsetMinutes;
-    const localTotal = sourceMinutes - diff
+        const localTotal = sourceMinutes - diff;
-
+        const dayShift = Math.floor(localTotal / 1440);
-    const dayShift = Math.floor(localTotal / 1440)
+        const normalizedMinutes = ((localTotal % 1440) + 1440) % 1440;
-    const normalizedMinutes = ((localTotal % 1440) + 1440) % 1440
+        const localHour = Math.floor(normalizedMinutes / 60);
-    const localHour = Math.floor(normalizedMinutes / 60)
+        const localMinute = normalizedMinutes % 60;
-    const localMinute = normalizedMinutes % 60
+        const sourceDayIndex = normalizeDay(parsed.day);
-
-    const sourceDayIndex = normalizeDay(parsed.day)
         if (sourceDayIndex === null) {
-      return null
+            return null;
         }
-
+        const localDayIndex = ((sourceDayIndex + dayShift) % 7 + 7) % 7;
-    const localDayIndex = ((sourceDayIndex + dayShift) % 7 + 7) % 7
+        const localDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][localDayIndex];
-    const localDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][localDayIndex]
+        const time = `${localHour.toString().padStart(2, '0')}:${localMinute.toString().padStart(2, '0')}`;
-
+        return `${localDay} at ${time} (Local)`;
-    const time = `${localHour.toString().padStart(2, '0')}:${localMinute.toString().padStart(2, '0')}`
+    };
-    return `${localDay} at ${time} (Local)`
-  }
-
     const nextAiringUTC = (parsed) => {
-    const targetDay = normalizeDay(parsed.day)
+        const targetDay = normalizeDay(parsed.day);
         if (targetDay === null) {
-      return null
+            return null;
         }
-
+        const now = new Date();
-    const now = new Date()
+        const jstNow = new Date(now.getTime() + jstOffsetMinutes * 60 * 1000);
-    const jstNow = new Date(now.getTime() + jstOffsetMinutes * 60 * 1000)
+        const currentDay = jstNow.getUTCDay();
-
+        const currentMinuteOfDay = jstNow.getUTCHours() * 60 + jstNow.getUTCMinutes();
-    const currentDay = jstNow.getUTCDay()
+        const targetMinuteOfDay = parsed.hour * 60 + parsed.minute;
-    const currentMinuteOfDay = jstNow.getUTCHours() * 60 + jstNow.getUTCMinutes()
+        let dayDelta = (targetDay - currentDay + 7) % 7;
-    const targetMinuteOfDay = parsed.hour * 60 + parsed.minute
-
-    let dayDelta = (targetDay - currentDay + 7) % 7
         if (dayDelta === 0 && targetMinuteOfDay <= currentMinuteOfDay) {
-      dayDelta = 7
+            dayDelta = 7;
         }
-
+        const minuteDelta = dayDelta * 1440 + (targetMinuteOfDay - currentMinuteOfDay);
-    const minuteDelta = dayDelta * 1440 + (targetMinuteOfDay - currentMinuteOfDay)
+        return new Date(now.getTime() + minuteDelta * 60 * 1000);
-    return new Date(now.getTime() + minuteDelta * 60 * 1000)
+    };
-  }
-
-  const relativeText = (target) => {
-    const diffMs = target.getTime() - Date.now()
-    if (diffMs <= 0) {
-      return 'soon'
-    }
-
-    const minutes = Math.ceil(diffMs / 60000)
-    if (minutes < 60) {
-      return formatRelative(minutes, 'minute')
-    }
-
-    const hours = Math.ceil(minutes / 60)
-    if (hours < 36) {
-      return formatRelative(hours, 'hour')
-    }
-
-    const days = Math.ceil(hours / 24)
-    return formatRelative(days, 'day')
-  }
-
     const formatRelative = (value, unit) => {
         if (typeof Intl !== 'undefined' && typeof Intl.RelativeTimeFormat === 'function') {
-      const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+            const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
-      return formatter.format(value, unit)
+            return formatter.format(value, unit);
         }
-
+        const suffix = value === 1 ? unit : `${unit}s`;
-    const suffix = value === 1 ? unit : `${unit}s`
+        return `in ${value} ${suffix}`;
-    return `in ${value} ${suffix}`
+    };
+    const relativeText = (target) => {
+        const diffMs = target.getTime() - Date.now();
+        if (diffMs <= 0) {
+            return 'soon';
         }
-
+        const minutes = Math.ceil(diffMs / 60000);
+        if (minutes < 60) {
+            return formatRelative(minutes, 'minute');
+        }
+        const hours = Math.ceil(minutes / 60);
+        if (hours < 36) {
+            return formatRelative(hours, 'hour');
+        }
+        const days = Math.ceil(hours / 24);
+        return formatRelative(days, 'day');
+    };
     const localDateTimeText = (date) => {
         const formatter = new Intl.DateTimeFormat(undefined, {
             weekday: 'short',
             hour: '2-digit',
             minute: '2-digit',
-    })
+        });
-    return formatter.format(date)
+        return formatter.format(date);
-  }
+    };
-
     const updateNextAiring = (node, parsed) => {
-    const card = node.closest('.notification-content')
+        const card = node.closest('.notification-content');
         if (!card) {
-      return
+            return;
         }
-
+        const nextNode = card.querySelector('[data-next-airing]');
-    const nextNode = card.querySelector('[data-next-airing]')
         if (!(nextNode instanceof HTMLElement)) {
-      return
+            return;
         }
-
+        const nextDate = nextAiringUTC(parsed);
-    const nextDate = nextAiringUTC(parsed)
         if (!nextDate) {
-      nextNode.remove()
+            nextNode.remove();
-      return
+            return;
         }
-
+        nextNode.textContent = `Next episode ${relativeText(nextDate)} (${localDateTimeText(nextDate)})`;
-    nextNode.textContent = `Next episode ${relativeText(nextDate)} (${localDateTimeText(nextDate)})`
+    };
-  }
-
     const updateNode = (node, localOffsetMinutes) => {
-    const card = node.closest('.notification-content')
+        const card = node.closest('.notification-content');
-    const nextNode = card ? card.querySelector('[data-next-airing]') : null
+        const nextNode = card ? card.querySelector('[data-next-airing]') : null;
-
+        const structured = parseFromStructuredAttrs(node);
-    const structured = parseFromStructuredAttrs(node)
+        const source = node.getAttribute('data-jst-text');
-    const source = node.getAttribute('data-jst-text')
+        const parsed = structured || parseBroadcast(source);
-    const parsed = structured || parseBroadcast(source)
         if (!parsed) {
             if (nextNode instanceof HTMLElement) {
-        nextNode.remove()
+                nextNode.remove();
             }
-      return
+            return;
         }
-
+        const converted = convertToLocal(parsed, localOffsetMinutes);
-    const converted = convertToLocal(parsed, localOffsetMinutes)
         if (!converted) {
             if (nextNode instanceof HTMLElement) {
-        nextNode.remove()
+                nextNode.remove();
             }
-      return
+            return;
         }
-
+        node.textContent = converted;
-    node.textContent = converted
+        updateNextAiring(node, parsed);
-    updateNextAiring(node, parsed)
+    };
-  }
-
     const updateAll = () => {
-    const localOffsetMinutes = -new Date().getTimezoneOffset()
+        const localOffsetMinutes = -new Date().getTimezoneOffset();
-    const nodes = document.querySelectorAll('[data-jst-text]')
+        const nodes = document.querySelectorAll('[data-jst-text]');
-    nodes.forEach((node) => updateNode(node, localOffsetMinutes))
+        nodes.forEach((node) => updateNode(node, localOffsetMinutes));
-  }
+    };
-
+    document.addEventListener('DOMContentLoaded', updateAll);
-  document.addEventListener('DOMContentLoaded', updateAll)
+    document.body.addEventListener('htmx:afterSwap', updateAll);
-  document.body.addEventListener('htmx:afterSwap', updateAll)
+})();
-})()

static/ts/anime.ts

@@ -0,0 +1,28 @@
+((): void => {
+  const toggleDropdown = (): void => {
+    const dropdown = document.getElementById('watchlist-dropdown')
+    if (!dropdown) {
+      return
+    }
+
+    dropdown.classList.toggle('open')
+  }
+
+  ;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleDropdown
+
+  document.addEventListener('click', (event: MouseEvent): void => {
+    const dropdown = document.getElementById('watchlist-dropdown')
+    if (!dropdown) {
+      return
+    }
+
+    const target = event.target
+    if (!(target instanceof Node)) {
+      return
+    }
+
+    if (!dropdown.contains(target)) {
+      dropdown.classList.remove('open')
+    }
+  })
+})()

static/ts/auth.ts

@@ -0,0 +1,25 @@
+function copyRecoveryKey(keyElementId: string, feedbackElementId: string): void {
+  const keyElement = document.getElementById(keyElementId)
+  const feedbackElement = document.getElementById(feedbackElementId)
+
+  if (!keyElement || !feedbackElement) {
+    return
+  }
+
+  const key = keyElement.textContent || ''
+  navigator.clipboard
+    .writeText(key)
+    .then((): void => {
+      feedbackElement.textContent = 'Recovery key copied.'
+    })
+    .catch((): void => {
+      feedbackElement.textContent = 'Copy failed. Select and copy manually.'
+    })
+}
+
+function confirmDangerAction(message: string): boolean {
+  return window.confirm(message)
+}
+
+;(window as Window & { copyRecoveryKey?: typeof copyRecoveryKey; confirmDangerAction?: typeof confirmDangerAction }).copyRecoveryKey = copyRecoveryKey
+;(window as Window & { copyRecoveryKey?: typeof copyRecoveryKey; confirmDangerAction?: typeof confirmDangerAction }).confirmDangerAction = confirmDangerAction

static/ts/discover.ts

@@ -0,0 +1,26 @@
+((): void => {
+  const setActiveTab = (clickedTab: Element): void => {
+    const group = clickedTab.closest('[data-tab-group="discover"]')
+    if (!group) {
+      return
+    }
+
+    const triggers = group.querySelectorAll('[data-tab-trigger]')
+    triggers.forEach((tab: Element): void => tab.classList.remove('active'))
+    clickedTab.classList.add('active')
+  }
+
+  document.addEventListener('click', (event: MouseEvent): void => {
+    const target = event.target
+    if (!(target instanceof Element)) {
+      return
+    }
+
+    const trigger = target.closest('[data-tab-trigger]')
+    if (!trigger) {
+      return
+    }
+
+    setActiveTab(trigger)
+  })
+})()

static/ts/search.ts

@@ -0,0 +1,127 @@
+((): void => {
+  const globalWindow = window as Window & { searchInitialized?: boolean }
+  if (globalWindow.searchInitialized) {
+    return
+  }
+  globalWindow.searchInitialized = true
+
+  let searchTimeout: number | undefined
+  const searchInput = document.getElementById('search-input') as HTMLInputElement | null
+  const searchDropdown = document.getElementById('search-dropdown')
+
+  if (!searchInput || !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 => {
+      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 = 'search-results'
+
+          const title = document.createElement('div')
+          title.className = 'search-results-title'
+          title.textContent = 'Anime'
+          searchResults.appendChild(title)
+
+          results.forEach((result): void => {
+            const item = document.createElement('a')
+            item.className = 'search-result-item'
+            item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')))
+
+            if (isSafeImageUrl(result.image)) {
+              const img = document.createElement('img')
+              img.className = 'search-result-thumb'
+              img.setAttribute('src', result.image || '')
+              img.setAttribute('alt', String(result.title || ''))
+              item.appendChild(img)
+            } else {
+              const noImage = document.createElement('div')
+              noImage.className = 'search-result-no-image'
+              noImage.textContent = 'no image'
+              item.appendChild(noImage)
+            }
+
+            const info = document.createElement('div')
+            info.className = 'search-result-info'
+
+            const itemTitle = document.createElement('div')
+            itemTitle.className = 'search-result-title'
+            itemTitle.textContent = String(result.title || '')
+            info.appendChild(itemTitle)
+
+            const itemType = document.createElement('div')
+            itemType.className = 'search-result-type'
+            itemType.textContent = String(result.type || '')
+            info.appendChild(itemType)
+
+            item.appendChild(info)
+            searchResults.appendChild(item)
+          })
+
+          const viewAll = document.createElement('a')
+          viewAll.className = 'search-result-view-all'
+          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('.header-search-wrapper')) {
+      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/ts/timezone.ts

@@ -0,0 +1,246 @@
+((): void => {
+  const jstOffsetMinutes = 9 * 60
+
+  type ParsedBroadcast = {
+    day: string
+    hour: number
+    minute: number
+  }
+
+  const parseBroadcastTime = (value: string | null): { hour: number; minute: number } | null => {
+    if (!value || typeof value !== 'string') {
+      return null
+    }
+
+    const match = value.trim().match(/^(\d{1,2}):(\d{2})$/)
+    if (!match) {
+      return null
+    }
+
+    const hour = Number.parseInt(match[1], 10)
+    const minute = Number.parseInt(match[2], 10)
+    if (Number.isNaN(hour) || Number.isNaN(minute) || hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+      return null
+    }
+
+    return { hour, minute }
+  }
+
+  const isJstTimezone = (timezone: string | null): boolean => {
+    if (!timezone) {
+      return true
+    }
+
+    const normalized = timezone.trim().toLowerCase()
+    return normalized === 'asia/tokyo' || normalized === 'jst'
+  }
+
+  const parseFromStructuredAttrs = (node: Element): ParsedBroadcast | null => {
+    const day = node.getAttribute('data-broadcast-day')
+    const time = node.getAttribute('data-broadcast-time')
+    const timezone = node.getAttribute('data-broadcast-timezone')
+
+    if (!day || !time || !isJstTimezone(timezone)) {
+      return null
+    }
+
+    const parsedTime = parseBroadcastTime(time)
+    if (!parsedTime) {
+      return null
+    }
+
+    return { day: day.trim(), hour: parsedTime.hour, minute: parsedTime.minute }
+  }
+
+  const parseBroadcast = (text: string | null): ParsedBroadcast | null => {
+    if (!text || typeof text !== 'string') {
+      return null
+    }
+
+    const match = text.match(/^(.*) at (\d{1,2}):(\d{2}) \(JST\)$/i)
+    if (!match) {
+      return null
+    }
+
+    const day = match[1].trim()
+    const hour = Number.parseInt(match[2], 10)
+    const minute = Number.parseInt(match[3], 10)
+
+    if (Number.isNaN(hour) || Number.isNaN(minute)) {
+      return null
+    }
+
+    if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
+      return null
+    }
+
+    return { day, hour, minute }
+  }
+
+  const normalizeDay = (day: string): number | null => {
+    const key = day.trim().toLowerCase().replace(/s$/, '')
+    const days: Record<string, number> = {
+      mon: 1,
+      monday: 1,
+      tue: 2,
+      tues: 2,
+      tuesday: 2,
+      wed: 3,
+      wednesday: 3,
+      thu: 4,
+      thur: 4,
+      thurs: 4,
+      thursday: 4,
+      fri: 5,
+      friday: 5,
+      sat: 6,
+      saturday: 6,
+      sun: 0,
+      sunday: 0,
+    }
+
+    if (typeof days[key] !== 'number') {
+      return null
+    }
+
+    return days[key]
+  }
+
+  const convertToLocal = (parsed: ParsedBroadcast, localOffsetMinutes: number): string | null => {
+    const sourceMinutes = parsed.hour * 60 + parsed.minute
+    const diff = jstOffsetMinutes - localOffsetMinutes
+    const localTotal = sourceMinutes - diff
+
+    const dayShift = Math.floor(localTotal / 1440)
+    const normalizedMinutes = ((localTotal % 1440) + 1440) % 1440
+    const localHour = Math.floor(normalizedMinutes / 60)
+    const localMinute = normalizedMinutes % 60
+
+    const sourceDayIndex = normalizeDay(parsed.day)
+    if (sourceDayIndex === null) {
+      return null
+    }
+
+    const localDayIndex = ((sourceDayIndex + dayShift) % 7 + 7) % 7
+    const localDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][localDayIndex]
+
+    const time = `${localHour.toString().padStart(2, '0')}:${localMinute.toString().padStart(2, '0')}`
+    return `${localDay} at ${time} (Local)`
+  }
+
+  const nextAiringUTC = (parsed: ParsedBroadcast): Date | null => {
+    const targetDay = normalizeDay(parsed.day)
+    if (targetDay === null) {
+      return null
+    }
+
+    const now = new Date()
+    const jstNow = new Date(now.getTime() + jstOffsetMinutes * 60 * 1000)
+
+    const currentDay = jstNow.getUTCDay()
+    const currentMinuteOfDay = jstNow.getUTCHours() * 60 + jstNow.getUTCMinutes()
+    const targetMinuteOfDay = parsed.hour * 60 + parsed.minute
+
+    let dayDelta = (targetDay - currentDay + 7) % 7
+    if (dayDelta === 0 && targetMinuteOfDay <= currentMinuteOfDay) {
+      dayDelta = 7
+    }
+
+    const minuteDelta = dayDelta * 1440 + (targetMinuteOfDay - currentMinuteOfDay)
+    return new Date(now.getTime() + minuteDelta * 60 * 1000)
+  }
+
+  const formatRelative = (value: number, unit: Intl.RelativeTimeFormatUnit): string => {
+    if (typeof Intl !== 'undefined' && typeof Intl.RelativeTimeFormat === 'function') {
+      const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
+      return formatter.format(value, unit)
+    }
+
+    const suffix = value === 1 ? unit : `${unit}s`
+    return `in ${value} ${suffix}`
+  }
+
+  const relativeText = (target: Date): string => {
+    const diffMs = target.getTime() - Date.now()
+    if (diffMs <= 0) {
+      return 'soon'
+    }
+
+    const minutes = Math.ceil(diffMs / 60000)
+    if (minutes < 60) {
+      return formatRelative(minutes, 'minute')
+    }
+
+    const hours = Math.ceil(minutes / 60)
+    if (hours < 36) {
+      return formatRelative(hours, 'hour')
+    }
+
+    const days = Math.ceil(hours / 24)
+    return formatRelative(days, 'day')
+  }
+
+  const localDateTimeText = (date: Date): string => {
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      weekday: 'short',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+    return formatter.format(date)
+  }
+
+  const updateNextAiring = (node: Element, parsed: ParsedBroadcast): void => {
+    const card = node.closest('.notification-content')
+    if (!card) {
+      return
+    }
+
+    const nextNode = card.querySelector('[data-next-airing]')
+    if (!(nextNode instanceof HTMLElement)) {
+      return
+    }
+
+    const nextDate = nextAiringUTC(parsed)
+    if (!nextDate) {
+      nextNode.remove()
+      return
+    }
+
+    nextNode.textContent = `Next episode ${relativeText(nextDate)} (${localDateTimeText(nextDate)})`
+  }
+
+  const updateNode = (node: Element, localOffsetMinutes: number): void => {
+    const card = node.closest('.notification-content')
+    const nextNode = card ? card.querySelector('[data-next-airing]') : null
+
+    const structured = parseFromStructuredAttrs(node)
+    const source = node.getAttribute('data-jst-text')
+    const parsed = structured || parseBroadcast(source)
+    if (!parsed) {
+      if (nextNode instanceof HTMLElement) {
+        nextNode.remove()
+      }
+      return
+    }
+
+    const converted = convertToLocal(parsed, localOffsetMinutes)
+    if (!converted) {
+      if (nextNode instanceof HTMLElement) {
+        nextNode.remove()
+      }
+      return
+    }
+
+    node.textContent = converted
+    updateNextAiring(node, parsed)
+  }
+
+  const updateAll = (): void => {
+    const localOffsetMinutes = -new Date().getTimezoneOffset()
+    const nodes = document.querySelectorAll('[data-jst-text]')
+    nodes.forEach((node: Element): void => updateNode(node, localOffsetMinutes))
+  }
+
+  document.addEventListener('DOMContentLoaded', updateAll)
+  document.body.addEventListener('htmx:afterSwap', updateAll)
+})()