refactor: simplify css and ts layout

CONTRIBUTING.md

@@ -30,6 +30,8 @@ go test ./...
 go run ./cmd/server
 ```
 
+TypeScript source files live in `static/js/*.ts` and are bundled to matching `static/js/*.js` files for runtime.
+
 ## Development guidelines
 
 - Follow existing folder boundaries (`internal/features/*`, `internal/jikan`, `internal/templates`)

README.md

@@ -83,6 +83,8 @@ bun run build:assets
 go run ./cmd/server
 ```
 
+The frontend pipeline uses a single source stylesheet (`static/css/style.css`) as Tailwind v4 input, then emits `static/css/tailwind.css` for serving.
+
 When the server starts, the app is available at `http://localhost:3000`.
 
 For containerized usage, the included `Dockerfile` uses a multi-stage build that generates templates, compiles `cmd/server`, and ships a slim runtime image with SQLite support.

package.json

@@ -2,9 +2,9 @@
   "name": "myanimelist-ui",
   "private": true,
   "scripts": {
-    "build:css": "bunx @tailwindcss/cli -i ./static/css/tailwind.input.css -o ./static/css/tailwind.css",
+    "build:css": "bunx @tailwindcss/cli -i ./static/css/style.css -o ./static/css/tailwind.css",
-    "watch:css": "bunx @tailwindcss/cli -i ./static/css/tailwind.input.css -o ./static/css/tailwind.css --watch",
+    "watch:css": "bunx @tailwindcss/cli -i ./static/css/style.css -o ./static/css/tailwind.css --watch",
-    "build:ts": "bunx tsc -p tsconfig.json",
+    "build:ts": "bun build ./static/js/*.ts --outdir ./static/js --target browser",
     "typecheck": "bunx tsc -p tsconfig.json --noEmit",
     "build:assets": "bun run build:css && bun run build:ts"
   },

static/css/style.css

@@ -1,3 +1,7 @@
+@import 'tailwindcss';
+
+@source '../../internal/**/*.templ';
+
 :root {
   --bg: #111419;
   --panel: #181d24;

static/css/tailwind.input.css

@@ -1,15 +0,0 @@
-@import 'tailwindcss';
-
-@source '../../internal/**/*.templ';
-
-@theme {
-  --color-bg: #111419;
-  --color-panel: #181d24;
-  --color-panel-soft: #1f2530;
-  --color-header: #1a2029;
-  --color-text: #e7eaf0;
-  --color-text-muted: #b8c0cd;
-  --color-text-faint: #8b97a8;
-  --color-accent: #cad4e4;
-  --color-danger: #d17f88;
-}

static/js/anime.js

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

static/js/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/js/auth.js

@@ -1,23 +1,19 @@
-"use strict";
+// static/js/auth.ts
 function copyRecoveryKey(keyElementId, feedbackElementId) {
-    const keyElement = document.getElementById(keyElementId);
+  const keyElement = document.getElementById(keyElementId);
-    const feedbackElement = document.getElementById(feedbackElementId);
+  const feedbackElement = document.getElementById(feedbackElementId);
-    if (!keyElement || !feedbackElement) {
+  if (!keyElement || !feedbackElement) {
-        return;
+    return;
-    }
+  }
-    const key = keyElement.textContent || '';
+  const key = keyElement.textContent || "";
-    navigator.clipboard
+  navigator.clipboard.writeText(key).then(() => {
-        .writeText(key)
+    feedbackElement.textContent = "Recovery key copied.";
-        .then(() => {
+  }).catch(() => {
-        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/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/js/discover.js

@@ -1,23 +1,23 @@
-"use strict";
+// static/js/discover.ts
 (() => {
-    const setActiveTab = (clickedTab) => {
+  const setActiveTab = (clickedTab) => {
-        const group = clickedTab.closest('[data-tab-group="discover"]');
+    const group = clickedTab.closest('[data-tab-group="discover"]');
-        if (!group) {
+    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) => {
+  document.addEventListener("click", (event) => {
-        const target = event.target;
+    const target = event.target;
-        if (!(target instanceof Element)) {
+    if (!(target instanceof Element)) {
-            return;
+      return;
-        }
+    }
-        const trigger = target.closest('[data-tab-trigger]');
+    const trigger = target.closest("[data-tab-trigger]");
-        if (!trigger) {
+    if (!trigger) {
-            return;
+      return;
-        }
+    }
-        setActiveTab(trigger);
+    setActiveTab(trigger);
-    });
+  });
 })();

static/js/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/js/search.js

@@ -1,109 +1,104 @@
-"use strict";
+// static/js/search.ts
 (() => {
-    const globalWindow = window;
+  const globalWindow = window;
-    if (globalWindow.searchInitialized) {
+  if (globalWindow.searchInitialized) {
-        return;
+    return;
+  }
+  globalWindow.searchInitialized = true;
+  let searchTimeout;
+  const searchInput = document.getElementById("search-input");
+  const searchDropdown = document.getElementById("search-dropdown");
+  if (!searchInput || !searchDropdown) {
+    return;
+  }
+  searchInput.addEventListener("input", (event) => {
+    if (searchTimeout) {
+      window.clearTimeout(searchTimeout);
     }
-    globalWindow.searchInitialized = true;
+    const target = event.target;
-    let searchTimeout;
+    if (!(target instanceof HTMLInputElement)) {
-    const searchInput = document.getElementById('search-input');
+      return;
-    const searchDropdown = document.getElementById('search-dropdown');
-    if (!searchInput || !searchDropdown) {
-        return;
     }
-    searchInput.addEventListener('input', (event) => {
+    const query = target.value.trim();
-        if (searchTimeout) {
+    if (query.length < 2) {
-            window.clearTimeout(searchTimeout);
+      searchDropdown.replaceChildren();
-        }
+      return;
-        const target = event.target;
-        if (!(target instanceof HTMLInputElement)) {
-            return;
-        }
-        const query = target.value.trim();
-        if (query.length < 2) {
-            searchDropdown.replaceChildren();
-            return;
-        }
-        searchTimeout = window.setTimeout(() => {
-            fetch('/api/search-quick?q=' + encodeURIComponent(query))
-                .then((res) => res.json())
-                .then((results) => {
-                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) => {
-                    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) => {
-                console.error('Search error:', err);
-            });
-        }, 300);
-    });
-    searchInput.addEventListener('blur', () => {
-        window.setTimeout(() => {
-            searchDropdown.replaceChildren();
-        }, 200);
-    });
-    document.addEventListener('click', (event) => {
-        const target = event.target;
-        if (!(target instanceof Element)) {
-            return;
-        }
-        if (!target.closest('.header-search-wrapper')) {
-            searchDropdown.replaceChildren();
-        }
-    });
-    function isSafeImageUrl(rawUrl) {
-        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;
-        }
     }
+    searchTimeout = window.setTimeout(() => {
+      fetch("/api/search-quick?q=" + encodeURIComponent(query)).then((res) => res.json()).then((results) => {
+        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) => {
+          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) => {
+        console.error("Search error:", err);
+      });
+    }, 300);
+  });
+  searchInput.addEventListener("blur", () => {
+    window.setTimeout(() => {
+      searchDropdown.replaceChildren();
+    }, 200);
+  });
+  document.addEventListener("click", (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    if (!target.closest(".header-search-wrapper")) {
+      searchDropdown.replaceChildren();
+    }
+  });
+  function isSafeImageUrl(rawUrl) {
+    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/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/js/timezone.js

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

static/js/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)
+})()

tsconfig.json

@@ -5,13 +5,13 @@
     "moduleResolution": "Bundler",
     "strict": true,
     "noEmitOnError": true,
-    "outDir": "./static/js",
+    "allowJs": false,
-    "rootDir": "./static/ts",
+    "noEmit": true,
     "sourceMap": false,
     "removeComments": false,
     "skipLibCheck": true
   },
   "include": [
-    "static/ts/**/*.ts"
+    "static/js/**/*.ts"
   ]
 }